Как я могу показать только схему для значка шрифта Awesome?

Question

Я работаю с иконкой тега из FA http://fontawesome.io/icon/tag/, и я хочу показать только контур (красный) и сделать внутреннюю прозрачную. fa-tag-o не работает. Я также попытался fa-tag-empty и CSS, как

.fa{ 
    color: transparent; 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: red; 
} 

но ничего не похоже на работу. Есть ли способ, которым я могу это сделать?

Заранее спасибо

Answer 1

Там нет тегов, как фа-таг-о вы можете использовать fa-tag или fa-tags ваш код работает отлично .. U can u se flip вы можете использовать rotate u, чтобы сделать собственный собственный css tor fa-tag, как я сделал пользовательский класс для второго fa-custom livefiddle fa-4x здесь x означает em, поэтому fa-4x означает fa size 4em.

.fa.fa-tag{ 
 
    color: transparent; 
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: red; 
 
} 
 
.fa.custom-fa{ 
 
font-size:12em; 
 
-webkit-text-stroke-color: blue; 
 
color:transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-tag fa-rotate-90 fa-4x" aria-hidden="true"></i><br><br> 
 

 
<i class="fa fa-tag fa-flip-horizontal custom-fa" aria-hidden="true"></i>

Answer 2

Если вы знаете цвет фона заранее, вы можете использовать text-shadow, и установите цвет значка на цвет фона.

.fa-tag { 
 
    text-shadow: 0px 0px 1px red; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<i class="fa fa-tag fa-flip-horizontal fa-lg" aria-hidden="true"></i>

Чтобы сделать его более прочным, наносить тени дважды:

.fa-tag { 
 
    text-shadow: 0px 0px 1px red, 0px 0px 1px red; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<i class="fa fa-tag fa-flip-horizontal fa-lg" aria-hidden="true"></i>

Answer 3

вы должны добавить -o Ex: fa fa-flag-o вместо fa fa-flag