Custom unordered Bullet List with Font Awesome
Custom unordered Bullet List with Font Awesome
Though I have already shared with your about custom
unordered bullet list by using start image But many Blogger don't want to use
Image. So the alternative way is using Font Awesome for displaying bullet
pointer. We know that Font Awesome is a
set of pictographic icon so we can change icon according to our wish. But for
example purpose in this tutorial I have used hand direction. Installing widget
is very easy just follow the below steps-
Step 1 Log in to your Blogger account and Go
to your Blogger Dashboard
Step 2 Click on -> Template -> Edit HTML
Step 3 Now find <head> by Pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 And Paste the below code after/below <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 5 Now again find ]]></b:skin> by
Pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 6 And Paste the below code above/before ]]></b:skin>
/*Bullet List by www.bloggerspice.com*/
.post ul {
list-style:none;
}
.post ul li:before{content:"\ f0a4";font-family: fontAwesome;
color: #333333;
font-style: normal;
top: 0;
left: 0;
margin-right: 13px;}
.post ul li{
position:relative;display:block;padding:5px 8px;margin-left:10px;background:#fff;font:15px "Oswald",sans-serif;color:#000000;text-decoration:none;transition:all .3s ease-out;
}
Step 7 Now simply hit the Save Template button.
Customization
- You can easily change Font Awesome icon by altering this "\ f0a4" code.
How to Add Bullet list?
We have done all task and in this time we will add the
bullet list in our Blog post. This is really easy. Just follow the below steps-
Step 1 Make your text in
separate line like 2/3 lines.
Step 2 Now block the whole line
by using mouse pointer.
Step 3 Finally click on Bullet list icon from formatting
tools bar in writing panel.
Now publish your Blog post and check it, you will
able to see bullet list powered by Font Awesome. The main positive side of
using Font Awesome that this will load from maxcdn server which is very fast to
load. And there hasn't any change to deletion of the icons, because we are not
using any image.
1 comment