How can I show only outline for a Font Awesome icon?
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>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>