Menu
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
312
To increase fa-border-all font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-border-all. Increase in icon size will be relative to their parent container.
Select the SVG of font-awesome located in your extracted zip inside fonts. Repeat the procces uploading your own svg files. Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). icon If you change the font-size of the icon's container, the icon gets bigger.
Are you using Font Awesome Free or Pro? - Some icons are only available in Font Awesome Pro. Double-check that the icon you want is in the version of Font Awesome you're referencing and using. Also, make sure you are using and referencing the right style prefix and supporting files to use Pro icons.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
