Line Awesome - Best Alternative of Font Awesome with Rich Icon Fonts

Line Awesome is a stylish Font Awesome Alternative with popular and rich collection of icon fonts.

Comments: 8
data:blog.title
Line Awesome - Best Alternative of Font Awesome with Rich Icon Fonts

The concept of Line Awesome is quite new but this article will introduce you with this popular and rich pictographic icon set. You won't believe! line Awesome included 37,900 Free Flat Icons in any format, size and color. So we have wide range of choice to use various pictographic icon fonts. And Yes, you can use their icons for free for personal or commercial use if you put a link on your website.

As a web developer and Blogger you are used to use Font Awesome icon. Definitely Font Awesome icons are awesome, but if you compare both Line Awesome and Font Awesome then you will get some advance benefit from Line Awesome.  However both are handy for improving our web design and development.  Line Awesome features icon fonts that contain symbols and pictographs. And it can be style and decorate with CSS coding.


Line Awesome - Best Alternative of Font Awesome with Rich Icon Fonts

Benefits of Line Awesome

There are some benefits that will give you more priority to Line Awesome over Font Awesome. Let's see it below-
  • Line Awesome icons easily modifiable in order to be read by screen readers which provides for accessibility according to W3C guidelines.
  • Line Awesome's icon fonts contain clear line icons. In contrast, Font Awesome instead of clear lines, they are composed of a solid fill.
  • It compatible with almost all browsers, even it works with Internet Explorer 4.
  • Another feature of Line Awesome is “plug and play” that requires a few lines of code in order to work on webpage.
  • Line Awesome icon fonts are made of vectors that can respond to CSS styling such as colors and size among other enhancing features.
  • In CSS styling it eliminates the use of multiple images to achieve various interactive effects.
  • It can load faster than Font Awesome and reduce file size on webpage.
  • Line Awesome icons can be used in 32x32 px grid, while Font Awesome might start with 14x14 px.
  • It can utilize every pixel in the screen,  Simply we can say it Pixel perfect.
  • Line Awesome icons can be easily resize without losing elegant look.

How to Integrate Line Awesome in Blogger Template?

This is quite easy to integrate Line Awesome on Blogger template. If you are using Font Awesome then you can add Line Font Awesome easily.
Step #1: Go to https://www.blogger.com and Sign in to your account
Step #2: From Blogger Dashboard click on ->Template ->Edit HTML 
Step #3: And locate the <head>  section in your Blogger template
Step #4: Finally copy following line of markup and paste it below <head> 
<link href='//maxcdn.icons8.com/fonts/line-awesome/css/line-awesome.min.css' rel='stylesheet' type='text/css'/>
Step #5: Now simply hit the Save template from the top.

Congratulation! you have successfully integrated Line Awesome in your Blogger template.

Line Awesome Icon Cheatsheet

Generally all pictographic icon display according to icon code. Font Awesome user already aware about this that we have to use code from a list of icon code. Similarly incase of Line Awesome we have to use icon code. You can grab the all code by visiting below URL.
  • https://icons8.com/line-awesome
After landing on the site Just click on any icon and you will explore the icon code easily.

How to use Line Awesome in Blogger Template?

This is a good question that after integrating Line Awesome file, how we can use it in our Blogger template?

we can write Line awesome in Blogger template file by Edit HTML and alternatively we can write it in Blog Post on "HTML" View. However for Resizing and coloring we must use CSS script.

All Line Awesome icons writing are similar to Font Awesome. It start with la and in case of Font Awesome we use fa. You can have a look at below example of Line Awesome icon code. This code will show Bull Horn.

<i class="la la-bullhorn"></i>
For placing icons in a list style we can write it like below

<ul class="la-ul">
<li style="text-align: left;"><i class="la la-adjust"></i>Adjust Icon</li>
<li style="text-align: left;"><i class="la la-anchor"></i>AnchorIcon</li>
<li style="text-align: left;"><i class="la la-balance-scale"></i>Balance Icon</li>
</ul>
line awesome customization
The above icon set will display in default size. but if you wish to increase the icon size then you can add a simple CSS script like below.
 
<style>
.la-ul{font-size:22px;}
</style>

<ul class="la-ul">
<li style="text-align: left;"><i class="la la-adjust"></i>Adjust Icon</li>
<li style="text-align: left;"><i class="la la-anchor"></i>AnchorIcon</li>
<li style="text-align: left;"><i class="la la-balance-scale"></i>Balance Icon</li>
</ul>

Here I have added font size 22px. So Line Awesome icons will now become bigger.

How to add color on Line Awesome Icons?

I will show you how to add color in Line Awesome icon. for your convenience I will use same code.
 
<style>
.la-ul{font-size:22px; color:#0BBE46}
</style>

<ul class="la-ul">
<li style="text-align: left;"><i class="la la-adjust"></i>Adjust Icon</li>
<li style="text-align: left;"><i class="la la-anchor"></i>AnchorIcon</li>
<li style="text-align: left;"><i class="la la-balance-scale"></i>Balance Icon</li>
</ul>

How to add Line Awesome Icon in Horizontal style with Fixed Width?

If you wish to add Line awesome icons in horizontal style with fixed with then you can write it like below.

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

Line Awesome - Best Alternative of Font Awesome
I hope you have got a clear idea about using Line awesome in your Blog. Many web developer give prefer on Line Awesome, even they are using this in many Web applications.  You will find many popular web application like iOS 10, Windows 8, Windows 10, Android 4 icons in Line Awesome.

Line Awesome - Best Alternative of Font Awesome with Rich Icon Fonts

Definitely you will love it for crispy and shiny icons in your website.  Additionaly if you are interested to work with large icon liek 32px X 32px then Line Awesome looks great. 

Speak Your Mind

Thank you for sharing such a nice and interesting blog with us. Hope it might be much useful for us. keep on updating...!!
seo company in india
digital marketing company in india

Hi, thank you for your review! We are happy that you found Line Awesome useful:)

Hi Anastasia Grebneva, You are most welcome. I hope this review will help my Blog readers. And they will able to use "Line Awesome" in their Blogger Template.
:up

Hi Jeffy, thanks for your honest feedback. :up

Thanks For This. How to I add font like Your site.

Hi There,I use Font Awesome and my Main font is Roboto Condensed. You Can folloe tutorial from below

http://www.bloggerspice.com/2015/11/What-is-new-in-the-latest-version-Font-Awesome-4.5.html

http://www.bloggerspice.com/2014/11/How-to-use-custom-Google-font-in-website.html

:)

Sorry bro, am confused on how to add those colour codes where put those codes? or we just add below head?
Help me steps to follow

Hi Franktz, You have to add the color code before b:skin or you can wrap the script inside

<style>
CSS Script
</style>


@@

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *