Use Font Awesome Icons in CSS
You can't use text as a background image, but you can use the :before
or :after
pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative
on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
- For FontAwesome v5, Free Version, use:
font-family: "Font Awesome 5 Free"
- For FontAwesome v5, Pro Version, use:
font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before
).
how to use font awesome icons in HTML
First you have to write this in the head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Then whenever you want to use a font awesome, Just copy its HTML code and paste it where you want it to be. for example:
<i class="fa-solid fa-c"></i>
how to use fontAwesome icon from css
You can use like this. I have updated your code.
ul li { display: inline-block;}
.right { float: right;}
button:after { content: "\f067"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; display: inline-block; vertical-align: middle; margin-left: 5px;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="right"> <li><button>Note</button></li></ul><ul> <li><a href="#"><i class="fa fa-user"></i></a></li> <li><a href="#"><i class="fa fa-book"></i></a></li> <li><a href="#"><i class="fa fa-cart-plus"></i></a></li></ul>
Use Font Awesome icon as CSS content
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
How to use Font Awesome 6 icons?
To use the new Font Awesome 6, you can again use the CDN (if that's your preference) like the following.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
Then use icons like the following.
<i class="fa-solid fa-house"></i>
Related Topics
How to Make React CSS Import Component-Scoped
Wait For Fonts to Load Before Rendering Web Page
How to Animate Handwriting Text on the Web Page Using Svg
How to Delay a :Hover Effect in Css
How to Dynamically Generate a List of Classes With Commas Separating Them
Applying CSS Styles Only to Certain Elements
Responsive CSS Triangle With Percents Width
A Grid Layout With Responsive Squares
How to Create an Angled Corner in Css
Svg Use Element and :Hover Style
How to Animate a Radial-Gradient Using Css
How to Validate Vendor Prefixes in CSS Like -Webkit- and -Moz-
Why Doesn't the Selector H3:Nth-Child(1):Contains('A') Work
Bootstrap With Different Order on Mobile Version