How to Install and Use Font Awesome 5 Icons on Blogger
New Tutorial How to Install Font Awesome 5 Icons on Blogger with HTML and CSS Pseudo Element in Blogspot
How to Install Font Awesome 5 Icons on Blogger
AMP Blogger - Font Awesome is the most popular WebFont icon that has been used by Webmasters. Font Awesome allows Webmasters to insert icons using <i> tags without having to insert images.
Until now, Font Awesome developed by Bootstrap has reached version 5. Where it supports more than 1000 icons that can be inserted in the HTML DOM.
Using Font Awesome is very easy, you only need to upload files that are downloaded for free on fontawesome.com and upload them to your website directory, or just call it by inserting the <link> tag in the webpage header. But, how's in Blogger?
Until now, Font Awesome developed by Bootstrap has reached version 5. Where it supports more than 1000 icons that can be inserted in the HTML DOM.
Using Font Awesome is very easy, you only need to upload files that are downloaded for free on fontawesome.com and upload them to your website directory, or just call it by inserting the <link> tag in the webpage header. But, how's in Blogger?
Because Blogger doesn't support uploading files (other than pictures / videos), then to use Font Awesome, you can simply insert the code on <head>.
This time, I will discuss a tutorial on how to install Font Awesome 5 on Blogspot. This tutorial is specifically for those of you who want to use only the icons in Font Awesome 5, because there are some differences in calling the icon between Font Awesome 5 and the previous version.
Insert Awesome Font 5 on Blogger
As I explained earlier, to install it on Blogger, you need to call Font Awesome 5 using the <link> tag and place it on the header of your Blogger template.
Copy and paste the following code before
<head> or </head><<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/solid.css' integrity='sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW' rel='stylesheet'/> <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/brands.css' integrity='sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite' rel='stylesheet'/> <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css' integrity='sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7' rel='stylesheet'/>
Click Save.
Using Font Awesome with <i>
If you have used Awesome Font 4.x.x, maybe you are familiar with calling the icon using the code below:
<i class="fa fa-lock" aria-hidden="true"></i>
<i class="fas fa-lock"></i>
There are 3 types of icons in FA 5, namely Solid, Regular (Pro), and Brands. Please explore yourself on the reference page that I mentioned.
Reference:
Icon Font Awesome 5:
https://fontawesome.com/iconsUsing Font Awesome 5 Icons with Pseudo Element (CSS)
Pseudo Element in CSS is used to arrange certain parts of an element. For example, it can be used for:
- Give the style of the first letter, or line, of an element
- Enter content before, or after, the content of an element
You can use Font Awesome 5 using CSS
::after and ::before to insert the icon before or after the website element. I will give an example of using it below:
HTML code for calling FA icon:
<span class='solid'> This is Solid Icon with CSS ::before</span> <span class='brands'> This is Solid Icon with CSS ::after </span>
CSS ::after and ::before for applying icon (Solid free and Brands)
.solid::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
.brands::after {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f37c";
}
Then the result is as below:
This is Solid Icon with CSS ::before
This is Solid Icon with CSS ::after
It's easy right? If you are still confused about the implementation, I have made a demo in codepen, please click the button below.
Demo
Good luck :) don't forget to read the article about Font Awesome Alternative