How to Install and Use Font Awesome Icons in Blogger?
Blogger Tips
If you want to install Font Awesome Icon in your blog using the CDN server or you want to learn how to use it in posts, follow these steps.
What Is the Font Awesome?
Fontawesome is a font used to create icons and symbols using a special CSS or HTML calling code for an icon on a website or blog. It was created by Dave Gandy using Bootstrap and later added to the Bootstrap CDN.Font Awesome is free to use for anyone's needs, and the installation process is easy, and no additional JavaScript code or account verification is required. It's easy to use, add an icon name to the HTML class, or add a unique icon code of a particular font awesome to the CSS content.
How to Install Font Awesome in Blogger Blogs?
- Go to the Blogger Dashboard and select your blog in which you want to install the Font Awesome.
- Go to the Themes menu, click the drop-down icon, and then click the Edit HTML option.
- Click anywhere in the theme code and then press the "CTRL + F" button on your computer keyboard. Blogger will display a search box at the top of the theme editing box.
- Type the <head> code in the search box and press Enter.
- When you get the <head> code for your blog theme, Then add the following font awesome code below the <head> and click the Save Theme button.
<link href='//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>Make sure you add the code between <head> and </head>.
How to Use Font Awesome Icons in Blogger?
There are two ways to use Font Awesome Icons in blog post and themes after installation, the first is HTML tag and the second is CSS in Unicode format.
If you want to use the font awesome icon in your blog, you need to know the HTML tag name and CSS Unicode code of this icon.
Go to this URL address https://fontawesome.com/v4.7.0/icons/ or this page to know all the lists of Font Awesome HTML tags and CSS Unicode.
Once you've browsed the above URL address in your browser, find the icon you want to add or use to your blog, and click the icon.
Clicking on the icon will take you to a new page. To the right of the icon's name is the Unicode used in the CSS language. While below is the HTML code, this is the code you have to write on your blog. So take note of this code.
We now have our respective icon HTML tags and CSS Unicode. I explain it one by one, so let's discuss how we can use it on our blog
1. HTML Tag Method.
The best way to write an font awesome icon in a blog post via HTML is to type in an inline type tag like <i> and <span>. The vast majority prefer to use <i>, as it was exemplified using <i> on its official website, so we also use the <i> tag to write an icon on our blog.
For example, I write an address book icon on this post using HTML <i> tag, and in the code where the class starts with fa, instead of the class name you can also use fas for font awesome solid icons and fab for font awesome brand icons.
<i class="fa fa-address-book-o" aria-hidden="true"></i>Font Awesome HTML tag code description is.
| Name | Meaning |
|---|---|
| i | It's an HTML tag. |
| fa | It's mean Font Awesome. |
| address-book-o | It's the name of the icon. |
| aria-hidden | It's used to hide purely used icons for decoration. |
So I wrote a class called "fa" of the Address Book icon in HTML Tag <i> and the result of this address book icon code would look something like this.
Now we're going to increase the size of the address book icon as we need it, we need to add another class name to increase the size, and that's the name of this class and its size.
| Class | Size |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
The code will look like this when you add the increased size class name to the Font Awesome icon code.
<i class="fa fa-address-book-o fa-sm" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-lg" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-2x" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-3x" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-4x" aria-hidden="true"></i>And after increasing the size of the font awesome icon, the result of the icon will be something like this.
You can also change the size and color of icons in HTML tags using inline CSS code. And when you the increased size of the Font Awesome icon using inline CSS, the code will look like this.
<i class="fa fa-address-book-o" aria-hidden="true" style="font-size:20px;color:#2e87e7;"></i>And the result of the icon will be like this.
2. CSS Unicode Method.
The CSS Unicode method for displaying the Font Awesome icon is through the CSS pseudo-elements placed on it ::before or ::after. For example, if you have an HTML tag with an iconunicode in the class name, the code would look something like this:
.iconunicode::after {
content: "\f2ba";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-left: 0.5em;
position: absolute;
}And the result of the CSS Unicode icon will be something like this.
The family font name in the CSS code must be "FontAwesome" and be sure to include a slash \ in front of the Unicode content. And if you want to increase or decrease the size of the icon, you can see the size in the table above.
I hope you find this "How to Install and Use Font Awesome Icons in Blogger?" post very useful and helpful.