Second problem: When you hover over these blocks, the font icons color does not change. It should turn into white as wel.

What I’m I doing wrong here? This is my code:

<div class="pf-menu-wrap">

<i class="fa fa-desktop fa-3x" aria-hidden="true"></i><br>
<span class="pf-icon-title">Websites</span>


<i class="fa fa-desktop fa-3x" aria-hidden="true"></i><br>
<span class="pf-icon-title">Webshops</span>


<i class="fa fa-desktop fa-3x" aria-hidden="true"></i><br>
<span class="pf-icon-title">Grafisch Ontwerp</span>

</div>

.pf-menu-wrap {
text-align:center;
}
.pf-menu-wrap a {
/*padding:10px;*/
border:1px solid #d65050;
color:#d65050;
text-decoration:none;
display:inline-block;
text-align:center;
width:30%;
margin:5px;
}
.pf-menu-wrap a:hover {
color:#fff;
background-color:#d65050;
}
.pf-icon-title {
font-size:2em;
text-transform:uppercase;
line-height:2em;
}

<div class="entry-content">
  <div class="pf-menu-wrap">
      <a href="#">
         <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
         <span class="pf-icon-title">Websites</span>
      </a>

 <a href="#">
     <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
      <span class="pf-icon-title">Webshops</span>
 </a>

 <a href="#">
     <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
     <span class="pf-icon-title">Grafisch Ontwerp</span>
 </a>
</div>
   </div><!-- .entry-content -->

.pf-menu-wrap i {
    display: block;
    margin: 0 auto;
}
.pf-menu-wrap {
    text-align: center;
}
.pf-menu-wrap a {
    border: 1px solid #d65050;
    color: #d65050;
    text-decoration: none;
    display: inline-block;
    width: 30%;
    margin: 5px;
    float: left;
    min-height: 211px;
    text-align: center;
    padding-top: 40px;
}

Second issue,

There is CSS defining all .fa elements to be red:
.fa {
color: #d65050;
}

so adding the hover to the a tag does not affect the i tag’s color

you would have to either delete the above line of css or add
.fa:hover {color:#fff;};