How To Use Awesome Font Icons In Blogger Templates ...?? | Largest Technology Website

How To Use Awesome Font Icons In Blogger Templates ...??

How To Use Awesome Font Icons In Blogger Templates ...?? How to use Font Awesome Icons in Blogger Templates ...? Font Awesome is a...

khmer make money online, របៀបដាក់ Icon Simble ពីមុខ Sub Menu, គន្លឹះរកលុយតាម Online, khmer blogger, How To Create Icons Font Awesome on Sub Menu In Blogger, blogger khmer, how to make money, how to make money online in cambodia, make money online, make money with adsense, how to make money online, easy way to make money, make money fast, make money online with google, how to make money on google, how to make money online in cambodia phnom penh, blogger template, social links blogger, facebook link blogger, blogger social, menu blogger, fontawesome, fontawesome blogger, font awesome, icons, how to, blogger, font, how to use font awesome icons, how to use font awesome, font awesome icon on blogger, Blogger (Website), Social Media (Website Category), How-to (Website Category), Blog (Industry), Template, Web Design (Interest), Tutorial (Media Genre), flagbd, flagbd.com, flag,

How To Use Awesome Font Icons In Blogger Templates ...??


How to use Font Awesome Icons in Blogger Templates ...?

Font Awesome is an iconic font designed by Bootstrap. This is a kind of SVG (Scalable Vector Graphic) icon

Every blogger wants to design their desired blog in the mind. Not everyone tries to make the blog a professional quality. But due to insufficient knowledge of web development, it is not possible to design for everyone. Today's post allows you to make your blog look a bit professional by using at least a few different icons.

As you may have noticed, many blogs and websites use a variety of interesting icons. But the shot is nowhere to be found in the image. Actually, those are not images. This is a type of font icon.

What makes a website attractive is its many speeds at home. Excessive pressure on using a large number of images on the website, using this font icon will help your blog / website relieve this stress.

What is Font Awesome Icons? Font Awesome is a kind of iconic font:
Designed by Bootstrap. This is a SVG (Scalable Vector Graphic) icon, which you can customize and use on any blog or website. These icons are not fixed in any particular form. You can use icons of any size if you wish.

If you use any type of icon, small or large, it will not change graphically. Also if you wish you can use Css code to give it any kind of color effect. If you look at the menubar of my blog you will notice that I have created a few icons using Font Awesome.There are two different versions of Font Awesome icon. One is 4.0.0 to 4.7.0 and the other is down to 5.0.0. There are different rules using these two versions. Here we will share the full tutorial on using only 4.0.0 to 4.7.0.

How to use Font Awesome 4.0? By following these little tricks, you can add this icon to any HTML and web page on your blog or website. See below -
-
First, login to your Blogger account.
Then from the Blogger dashboard, click on Theme> Edit HTML.

Then press Ctrl + F from the keyboard </head> to search the section.
Copy the bottom line and paste it over the </head>.

<link href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel = 'stylesheet' />

Then click on Save Template.
The Css code of the Font Awesome icon was added to your blog through this link above. You can upload and use these code from your own server if you wish. Now we will show you how to use these icons on your desired page or place.

Now you have to choose which code you want to use in your page / template. For this you are the official website of Font Awesome https://fontawesome.com/icons?from=io  You can choose from the icon of your choice.

From there you can select a favorite icon by typing the name of the icon in the search bar and clicking on it, you will see a class like the one below. See below

<i class = "fa fa-home"> </i>

The red part of the above class is the name of your desired icon. In this section you can use different icons with different font names. But you must use this <i class = "fa fa-name"> </i> each time.

Icon Customize:
If you like, you can change the size, color and border of your font icons using the Css code below. For example, I am showing the Home icon -

.fa-home {
font-size: 20px;
color: # 000000;
padding: 5px;
border: 1px solid # 000;
float: left;
}

This way, when customizing icons, one should use the Css code next to each icon. Below are some

more examples:
Adding big icons:
For big laws, the fa-lg will then increase by 5% if you consistently add the fa-2x, fa-3x, fa-4x, and fa-5x classes. See below -

<i class = "fa fa-car fa-lg"> </i>
<i class = "fa fa-car fa-2x"> </i>
<i class = "fa fa-car fa-3x"> </i>
<i class = "fa fa-car fa-4x"> </i>
<i class = "fa fa-car fa-5x"> </i>


The output will look like the following.
The output will look like the following.

Adding Animated Icons:
You must use fa-spin to rotate the icons and fa-pulse to rotate the icons at 8 steps. See how to do it below -

<i class = "fa fa-spinner fa-spin"> </i>
<i class = "fa fa-circle-o-notch fa-spin"> </i>
<i class = "fa fa-refresh fa-spin"> </i>
<i class = "fa fa-cog fa-spin"> </i>
<i class = "fa fa-spinner fa-pulse"> </i>

The output will look like the following.

Adding Stacked Icons:
The fa-stack here is the original Class and the fa-stack-1x and fa-stack-2x can make the size of the icons smaller and the color of the icons can be changed through fa-inverse. See below -

<span class = "fa-stack fa-lg">
<i class = "fa fa-circle-thin fa-stack-2x"> </i>
<i class = "fa fa-twitter fa-stack-1x"> </i>
</span>
<span class = "fa-stack fa-lg">
<i class = "fa fa-circle fa-stack-2x"> </i>
<i class = "fa fa-twitter fa-stack-1x fa-inverse"> </i>
</span>
<span class = "fa-stack fa-lg">
<i class = "fa fa-camera fa-stack-1x"> </i>
<i class = "fa fa-ban fa-stack-2x text-danger" style = "color: red;"> </i>
</span>

The output will look like the following.

Adding Fixed Width Icons:
After adding the icons, add fa-fw. Determine the size of these icons. See below -



<div class = "list-group">
<a href="#" class="list-group-item"> <i class = "fa fa-home fa-fw"> </i> Home </a>
<a href="#" class="list-group-item"> <i class = "fa fa-book fa-fw"> </i> Library </a>
<a href="#" class="list-group-item"> <i class = "fa fa-pencil fa-fw"> </i> Applications </a>
<a href="#" class="list-group-item"> <i class = "fa fa-cog fa-fw"> </i> Settings </a>
</div> 

Note: This way you can add all types of icons to your blog in different styles. Because the latest version of Font Awesome Icons 4.5.0 contains 605 types of icons. You can also use all their up-to-date icons without having to change the Style Sheet as they are updated.


Thanks For Reading The Post

COMMENTS

Name

Android,37,Apps Review,57,Blogger,39,C Programing,3,Facebook,23,Game Review,14,Hacking,43,JavaScript,4,LifeStyle,9,Online Earning,63,Pdf Books,4,Tech News,22,Technology Update,18,Tools,12,Web Development,25,Windows (PC),46,Wordpress,30,Youtube,39,
ltr
item
Largest Technology Website : How To Use Awesome Font Icons In Blogger Templates ...??
How To Use Awesome Font Icons In Blogger Templates ...??
https://1.bp.blogspot.com/-HkdlUxy0vqw/XdOC-IRj3JI/AAAAAAAAEec/BAqWX4udqkAfQ7XVl0PKEHHEuGMa2KjQgCNcBGAsYHQ/s640/image_search_1574142444406.jpg
https://1.bp.blogspot.com/-HkdlUxy0vqw/XdOC-IRj3JI/AAAAAAAAEec/BAqWX4udqkAfQ7XVl0PKEHHEuGMa2KjQgCNcBGAsYHQ/s72-c/image_search_1574142444406.jpg
Largest Technology Website
https://www.flagbd.com/2019/11/how-to-use-awesome-font-icons-in-blogger.html
https://www.flagbd.com/
https://www.flagbd.com/
https://www.flagbd.com/2019/11/how-to-use-awesome-font-icons-in-blogger.html
true
2875505316624058831
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy