FontaAwesome как контент для привязки тега

Question

Я не уверен, что это причина, но везде, где я искал в Интернете, я видел, как люди используют шрифты. Значимые значки только на псевдоселекторах. Я хочу, чтобы мой значок fontAwesome отображался как контент в предопределенном классе .btn.

В основном мой код выглядит следующим образом:

HTML

<a class="btn phone" href="#"></a> 

CSS

.phone { 
    font-family: 'fontAwesome'; 
    content: "\f095"; 
} 

.btn { /*defined in another file*/ } 

код похож на это работает на других якорей, но я не могу заставить его работать. Надеюсь, вы поняли мою проблему.

Answer 1

попробуйте: перед селектором CSS. Это то, что создает псевдоэлемент.

.phone:before { 
    font-family: 'fontAwesome'; 
    content: "\f095"; 
} 

.btn { /*defined in another file*/ } 

Answer 2

Я делаю это, как этот <a href="#" onclick="alert('see me work')"><i class="fa fa-times"></i></a>

Пример:

https://jsfiddle.net/w63ffsdn/

Answer 3

Рабочий пример: http://jsfiddle.net/7ev7071e/

.phone, 
.phone:before { 
    font-family: 'fontAwesome'; 
} 
.phone:before { 
    content: "\f095"; 
} 

.btn { /*defined in another file*/ } 

Answer 4

Я видел, как люди используют шрифтВысокие значки только на псевдоселекторах. Я хочу, чтобы мой значок fontAwesome отображался как контент в предопределенном классе .btn.

Свойство content используется с ::before и ::after псевдо-элементов для генерации содержимого в элементе. Чтобы ответить на ваш вопрос, он не будет работать так, как вы этого хотите. Посмотрите на эту скрипку: http://jsfiddle.net/yongchuc/adt394sp/.