font-awesome with sass in content css

Question

Я проверил несколько тем, я это один из новых, я нашел один похожий, но не тот же случай.

Итак, мой проект работает идеально с sass и font-awesome.

Я импортировать шрифт-удивительный SCSS файл:

//libs 
@import "css/font-awesome/scss/font-awesome"; 

И мой класс Sass Я использую

&:hover { 
    font-family: FontAwesome; 
    content: $fa-var-android; 
} 

Я не хочу использовать семейство шрифтов: FontAwesome; в каждом классе, это как-то использовать именно так?

&:before { 
    content: $fa-var-android; 
} 

Или еще лучше: только юникод?

&:hover { 
    content: '\f26e'; 
} 

Я пробовал, но не работал, кто-то может мне помочь?

спасибо.

Answer 1

Спасибо за вашу помощь , Я согласен с этими ответами выше, но они применяются только в нескольких классах не во всех моих CSS. Понимаю?

, так что я нашел лучший способ сделать это просто так:

body { 
    font-family: FontAwesome,Helvetica; 
} 

так, как я могу использовать Юникод и переменные, и мне не нужен записи семейство шрифтов в моих классах.

&:before { 
    content: $fa-var-android; 
} 


&:hover { 
    content: '\f26e'; 
} 

спасибо.

Answer 2

Вот решение, использующее общий класс для семейства шрифтов.

HTML

<div class="a b"> 

</div> 

CSS

.a{ 
    font-family: FontAwesome; 
} 
.b:before{ 
    content: '\f26e'; 
} 
.b:hover:before{ 
    content: '\f2a3'; 
} 

Answer 3

&:hover { 
content: '\f26e'; 
} 
&:before { 
content: '\f003'; 
} 
&:hover, &:before { 
font-family: FontAwesome 
} 

Таким образом, вы можете добавить все классы и псевдо-классов, которые вы хотите после запятых и включают семейство шрифтов на одном дыхании !

Answer 4

Я бы создать mixin для этой цели, и в этом mixin вы включите FontAwesome family-font и content переменных:

$icon: 'bar'; 
$icon-2: 'baz'; 

@mixin fa($icon){ 
    font-family: FontAwesome; 
    content: $icon; 
} 

.foo{ 
    @include fa($icon); 

    &:before{ 
    @include fa($icon-2); 
    } 
} 

И вывод:

.foo { 
    font-family: FontAwesome; 
    content: "bar"; 
} 

.foo:before { 
    font-family: FontAwesome; 
    content: "baz"; 
}