If you are a blogspot user then you have no separate disk space to store media files and to use those as required like WordPress. So whenever you have to use symbols like Home, Search, Menu icons you have to depend on external image sources and upload them every time you write post. And finding images of right size is also a critical task.
But you can easily do it by adding an icon library to your blog and whenever you need icons you can create them with a small piece of HTML. You can add three popular icon libraries to your blog. Namely:
1. Font Awesome Icon set
To add Font Awesome Library to your blog simply copy the following code and paste into your blogger template
<link rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Place the above code just above the closing head (</head>) tag of your blogger template.
Now to add your required icons you have to type
<i class=”fa fa-home”></i>
for home icon
<i class=”fa fa-search”></i>
for search icon
<i class=”fa fa-cloud”></i>
for cloud image etc.
You can change size and color by adding “style” values to the icons
Like <i class=”fa fa-home” style=”color:red;”></i>
2. Google Material Design Icons
To add Google Material Design Icons you have to add
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
this code above the closing head section.
And to add icons you have to type
<i class=”material-icons”>home</i> for home icon
<i class=”material-icons”>search</i> for search icon etc.
3. Bootstrap Icons
To add Bootstrap Icons you have to add
<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
this code above the closing head section of your blogger template.
To add icons you have to type
<i class=”glyphicon glyphicon-home”></i> for home icon
<i class=”glyphicon glyphicon-search”></i> for search icon
<i class=”glyphicon glyphicon-cloud”></i> for cloud icon etc.
How To Integrate With Your Blog:
To add one or all of these icon libraries At first
go to your Blogger dashboard
Click on Theme then click edit HTML, Now place the code above closing head </head> tag, click Save and you are done. If you face any problem please comment bellow this post.
(adsbygoogle = window.adsbygoogle || []).push({});