How to Customize Font Awesome Icons in Blogger

Font awesome are vector icons that can be used on any webpage. It is a set of SVG (Scalable Vector Graphics) Icons which means every icon looks awesome at any size. One of feature of Font Awesome icons is that these icons are easily customizable with CSS. Recently we've talked about How to Use Font Awesome Icons in Blogger and today we are going to discuss that How to Customize Font Awesome Icons in Blogger. So, let's come to the point

How to Use Font Awesome Icons

Simply: Choose an icon >> Note down its class name >> Use  tag >> Add it to your Blog. Example:

You can use these icons anywhere you want. e.g. Navigation menu, Side bar or anywhere you want in your template. You can view a list of available icons in Font Awesome Inventory here.
Visit this Link How to Use Font Awesome Icons in Blogger.

Resizing Icons

You can resize font awesome icons by using fa-lg, fa-2x, fa-3x, fa-4x and fa-5x. Check the examples below that how it works.

Customize Icons using CSS

You can also customize font awesome icons by applying CSS. Using CSS you can customize shadows, size, color and more.

.fa-envelope {
font-size: 16px;
color: #000;
padding: 5px;
border: 1px solid #ccc;
float:left;
}

You can replace the highlighted text with the class of any other icon and then customize it

Spinning Icons

You can spin font awesome icons by using fa-spin. Look at the examples below:









Rotate and Flip Icons

Just like spinning and resizing you can rotate these icons using fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-vertical and fa-flip-horizontal.











Stacking Icons

You can also stack two or more icons to create a new icon fa-stack or fa-stack-2x or fa-stack-3x for large icons. Example

Result:

Result:

List Icons

Replace bullets and numbering using fa-ul and fa-li tags. Exapmle

Minus Circle
Star Icon
Spinner Icon
Share Square

<ul class="fa-ul">
<li>Minus Circle</li>
<li>Star Icon</li>
<li>Spinner Icon</li>
<li>Share Square</li>
</ul>

From Editors Desk

We hope this article helped you in customizing font awesome icons for your blog. Share this article with your friends and don't forget to subscribe us. Feel free to ask. Your feedback is always highly appreciated.