I want to use a Font Awesome icon as CSS content, i.e.,
a:before { content: "<i class='fa...'>...</i>"; }
I know I cannot use HTML code in content
, so is it only images left?
To use font awesome icons as CSS content code follow the below steps. Add a unique CSS class name to the icon element you want to use. Set the font-weight css property as 900 (For Solid), 400 (Regular or Brands), 300 (Light for pro icons). Set the content css property to the unicode value font awesome icon.
Enable Pseudo-elements Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You'll need to add the <script data-search-pseudo-elements ... > attribute to the <script> element that calls Font Awesome.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
It is as simple as putting Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon's name.
Update for FontAwesome 5 Thanks to Aurelien
You need to change the font-family
to Font Awesome 5 Brands
OR Font Awesome 5 Free
, based on the type of icon you are trying to render. Also, do not forget to declare font-weight: 900;
a:before { font-family: "Font Awesome 5 Free"; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; }
Demo
You can read the rest of the answer below to understand how it works and to know some workarounds for spacing between icon and the text.
FontAwesome 4 and below
That's the wrong way to use it. Open the font awesome style sheet, go to the class
of the font you want to use say fa-phone
, copy the content property under that class with the entity, and use it like:
a:before { font-family: FontAwesome; content: "\f095"; }
Demo
Just make sure that if you are looking to target a specific a
tag, then consider using a class
instead to make it more specific like:
a.class_name:before { font-family: FontAwesome; content: "\f095"; }
Using the way above will stick the icon with the remaining text of yours, so if you want to have a bit of space between the two of them, make it display: inline-block;
and use some padding-right
:
a:before { font-family: FontAwesome; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; }
Extending this answer further, since many might be having a requirement to change an icon on hover, so for that, we can write a separate selector and rules for :hover
action:
a:hover:before { content: "\f099"; /* Code of the icon you want to change on hover */ }
Demo
Now in the above example, icon nudges because of the different size and you surely don't want that, so you can set a fixed width
on the base declaration like
a:before { /* Other properties here, look in the above code snippets */ width: 12px; /* add some desired width here to prevent nudge */ }
Demo
Another solution without you having to manually mess around with the Unicode characters can be found in Making Font Awesome awesome - Using icons without i-tags (disclaimer: I wrote this article).
In a nutshell, you can create a new class like this:
.icon::before { display: inline-block; margin-right: .5em; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
And then use it with any icon, for example:
<a class="icon fa-car" href="#">This is a link</a>
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