Proponowałbym Ci umieścić każda parę (ikona i jej podpis) w oddzielnym div'ie i każdemu z tych div'ów nadać display:inline-block.
Np. coś takiego:
<div class="gold2">
<div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-gold1"></i></div>
<div class="rank-t">Gold 1</div>
</div>
<div class="gold1">
<div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-gold2"></i></div>
<div class="rank-t">Gold 2</div>
</div>
<div class="silver">
<div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-silver"></i></div>
<div class="rank-t">Silver</div>
</div>
.gold2,.gold1, .silver{
display: inline-block;
width: 200px;
height: 200px;
background-color: #ddd;
margin: 10px;
font-size: 50px;
text-align: center;
}
.gold2:hover i{
color: #DAA520;
}
.gold2:hover .rank-t{
color: #fff;
}
.gold1:hover i{
color: #808080;
}
.gold1:hover .rank-t{
color: #fff;
}
.silver:hover i{
color: #DAA520;
}
.silver:hover .rank-t{
color: #fff;
}
Edit:Nie spojrzałem wcześniej na komentarze, ale może to rozwiązanie na coś się jeszcze kiedyś przyda ;)