How can I show only outline for a Font Awesome icon?

Question

I am working with the tag icon from FA http://fontawesome.io/icon/tag/ and what I wish to do is to display only the outline (red) of it and make the inside transparent. fa-tag-o does not work. I've also tried fa-tag-empty and CSS like

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

but nothing seems to work. Is there any possible way I can do this?

Thanks in advance

Answer 1

There is no tag like fa-tag-o you can use fa-tag or fa-tags your code works fine.. U can use flip you can use rotate u can make ur own custom css tor fa-tag like I made a custom class for the second fa-custom livefiddle fa-4x here x means em so fa-4x means 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

If you know the background color beforehand, you can use text-shadow, and set the color of the icon to the background color.

.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>

To make it more solid, apply the shadow twice:

.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>