FontAwesome unicodes не работают?

Question

У меня есть <li>, что при наведении курсора предполагается изменить число на значок юникода, например кнопку воспроизведения.

Юникоды продолжают появляться значок, который выглядит так: [?] Я предполагаю, что он не может их найти. Я использую шрифтовые значки в других частях просто отлично, любые идеи?

<ul class="popular-songs"> 
      <li> 
<div class="album-cover"><img src="http://newnoisemagazine.com/wp-content/uploads/2014/04/Expire-Pretty-Low-cover.jpg"></div> 
<span class="number"> 
<span>1</span> 
</span> 
<span>+</span> 
<span class="title">Pretty Low</span> 
<span class="misc"><i class="fa fa-ellipsis-h"></i></span> 
<span class="total-plays">163,957</span></li> 
     </ul> 

CSS:

.popular-songs li .number{ 
    position: relative; 
    content: '1'; 
    top:0px; 
} 
.popular-songs li:hover .number span{ 
    display: none; 
} 
.popular-songs li:hover .number:after{ 
    content: "\f04b"; 
    position:relative; 
    top:15px; 
} 

Я пытался писать Юникода всячески я мог думать.

content: "/XXXX";

content: "\XXXX";

content: "XXXX";

content: "[XXXX]";

Ни один из них, кажется, работает для меня.

Answer 1

Добавьте семейство шрифтов в вашем CSS, как:

.popular-songs li:hover .number:after{ 
    font-family: 'FontAwesome'; 
    content: "\f04b"; 
    position:relative; 
    top:15px; 
} 

И только для справки, вот FontAwesomes CSS для всех значков:

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    transform: translate(0, 0); 
}