Шрифт Awesome Цвет фона

Question

При использовании блестящего шрифта Awesome, как я могу сделать значки не прозрачными - например, если я хочу использовать http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/, но не имеет «стрелки вверх» в черном круге, прозрачный, но сплошной цвет (белый)?

Спасибо!

Answer 1

К сожалению, вся иконка считается единственной «символом» на странице и, как таковая, у вас нет этого гранулярного контроля над ней. Вы можете просто установить одно свойство «color», чтобы установить цвет символа/значка таким, какой вы хотите.

Теперь это возможно для творческого взлома. С середины символа прозрачна, вы можете установить цветной фон позади персонажа, чтобы сделать вид, что середина другого цвета, делая что-то вроде этого:

<i class="fa fa-chevron-circle-up"></i> 

затем в вашем CSS:

.fa-chevron-circle-up { 
    background: yellow; 
    border-radius: 50%; 
    height: 1em; 
    width: 1em; 
} 

Если окружность фона смещает значок, вы можете использовать line-height, чтобы исправить это.

Answer 2

вы можете использовать фа-стек со значком фа круга под другой, чтобы лучше контролировать на пиксель только на границе:

<span class="fa-stack"> 
    <i class="fa fa-circle fa-stack-1x icon-a"></i> 
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i> 
</span> 

с:

.icon-a { 
    color: #FFF; 
    font-size: 0.9em; 
} 
.icon-b { 
    color: #000; 
} 

Answer 3

У меня есть еще один хак для людей, которые по-прежнему заинтересованы:

<i class="fa fa-chevron-circle-up fa_with_bg"></i> 

И в CSS:

.fa_with_bg{ 
    position: relative; 
} 

.fa_with_bg::after{ 
    position: absolute; 
    content: ''; 
    background: #fff; 
    z-index: -1; 
    top: 10px; 
    left: 3px; 
    width: 35px; 
    height: 33px; 
} 

Вам просто нужно добавить класс fa_with_bg.
* Возможно, вам придется немного поиграть с объектами top, left, width и height.