• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

TechLila

Bleeding Edge, Always

  • Home
  • About
  • Contact
  • Deals and Offers
Techlila Logo
Share
Tweet
Share
Pin
1 Shares
HTML5 Gaming Engines
Up Next

Make Your Own HTML5 Game with HTML5 Development Engines

Font Awesome Iconic Font Exa

TechLila Web Design and Development

Icon Fonts: Pros and Cons of the Font Awesome

Avatar of Rajesh Namase Rajesh Namase
Last updated on: March 19, 2018

Icon fonts are used to include certain standard icons in your website content. The Font ‘Awesome’ is a particularly good example of these that offers many advantages over other icon fonts. Originally designed by Dave Gandy for use with Twitter Bootstrap, Font Awesome can be used with WordPress by using the Font Awesome Icons plugin designed by Rachel Baker.

Here is a brief introduction to such fonts and where the Awesome font fits into a style that may still be in its infancy.

Why Use Icon Fonts

When you design a website, images take up a lot of web space due to their file sizes. They also have to be called up to your web pages using HTML markup. Not only that, but their scaling is frequently a problem, losing definition as they are increased in size. A regular image only resolves as intended when used in its originally designed dimensions.

When you are seeking standard icon images, such as for vehicles, certain punctuation characters or graphical charting icons, icon fonts can offer you scalable images that look the same irrespective of the size of the font. This is just as letters and numbers appear the same irrespective of whether you use a size 2 or 5 or a 10 or 24 point font size.

In many cases, people simply do not use images because of this problem, and their article or online report suffers in detail or clarity because of it. By using Font Awesome, they can add basic icons to their sites and scale them to the required size, limited only by the dimensions of their documents – and they can so without losing definition. You can look upon scalable icons in the same way as scalable font characters.

Here is a selection of the video player and social icons available:

Font Awesome Iconic Font Examples

And also the new icons that come with version 3.0:

New Icons Font Awesome Iconic Font

Each of these can be increased in size with no loss in definition. You can change their color and easily add shadows and change their transparency. In fact you can do anything with them that you can with images, and then some, without the disadvantages of file size.

That is basically what icon fonts can do, and the Awesome font in particular. Here is some information on how to use them and take best advantage of them, and also one or two disadvantages associated with icon fronts:

Using Font Awesome

With Normal Bootstrap CSS:

Font Awesome can be used with the default Bootstrap CSS by copying the Awesome font directory into your project, and then coping font-awesome.min.css into the project. You must then open font-awesome.min.css and edit the font paths to ensure they point to the Awesome location.

In the Head section of your HTML the location of the font-awesome.min.css should be referenced thus:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

The font path being relative from your CSS directory.

With Bootstrap Less:

If you are using Twitter Bootstrap with LESS CSS, then first copy the Font Awesome font directory into your project, and font-awesome-less into your Bootstrap Less directory. Then:

  • a) Open bootstrap.less and replace @import “sprites.less”; with @import “font-awesome.less”;
  • b) Open your project’s font-awesome.less and edit the @FontAwesomePath variable to point to your font directory.
@FontAwesomePath: "../font";

The font path being relative from your compiled CSS directory.

You are then all set – although if you are using a static compiler you should recompile LESS.

Not Using Bootstrap:

If you are not using Bootstrap, then after copying the font file to your project directory you can copy either of the two font-awesome files into your project, open it end then edit the location of the font to point to the font directory.

If you are using Internet Explorer 7, then use font-awesome-ie7.min.css

How to Use Font Awesome in WordPress

There are two easy ways to use icon fonts in WordPress one you have uploaded the plugin*. You can embed them using HTML, or use shortcode. Here are examples of each:

Using HTML: Where you want the font to appear, simply add the name of the item to the class name thus: [html]<i class=”icon-circle”></i>[/html]
will add a black circle.

You can change the size of the circle thus:

<div style="font-size: 44px;">
<i class="icon-umbrella icon-circle"></i></div>

You will probably find it easier to add the font size to your CSS stylesheet if you intend using the same size of icon frequently, and the above format for exceptions.

Using Shortcode: Shortcode is easier, but will generally work only for post and page content in post editor screen. The format is [icon name=icon-circle] where you want the circle.

The Downside of Icon Fonts

Icon fonts seem great to use when you have a need to add a specific icon to your blog or website, and they can be linked to carry out specific functions. However, not everything is perfect, and icon fonts also have disadvantages. These are the common problems that are reported by users of icon fonts that do not apply to Font Awesome – that’s why it’s so ‘Awesome!’

  1. One is the potential problem with screen readers that might read aloud the icon as an alphabetical letter. This is not a problem with Font Awesome due to the way the font characters are retrieved.
  2. They can be presented in only a single color – or in a color gradient using CSS3 gradients. Is that a genuine problem with icon fonts?
  3. It can take time to create a custom font to suit your needs. However, there is already a large selection of awesome fonts offered by Font Awesome, and the list is continually being expanded. Although it is free closed source font, approved fonts designed by users are added regularly.

Font Awesome Generator Summary

The Font Awesome generator is one of the best free icon fonts currently available. Although it was designed for use with Twitter Bootstrap, it can be adapted for use on regular websites and there is also a WordPress plugin available that offers the best of this icon font. If you use icon fonts, then give the Font Awesome a try because you might be pleasantly surprised once you have mastered it.

* The Font Awesome Icons WordPress plugin is available from https://github.com/rachelbaker/

Share
Tweet
Share
Pin
1 Shares

Disclosure: Content published on TechLila is reader-supported. We may receive a commission for purchases made through our affiliate links at no extra cost to you. Read our Disclaimer page to know more about our funding, editorial policies, and ways to support us.

Sharing is Caring

Share
Tweet
Share
Pin
1 Shares
Avatar of Rajesh Namase

Rajesh Namase

Rajesh Namase is a professional blogger and founder of TechLila blog. Also, he's a passionate entrepreneur, internet marketer, and fitness freak.

Category

  • Web Design and Development

Tags

Font Awesome

Reader Interactions

What people are saying

  1. Avatar of Vivek Nath.RVivek Nath.R

    In my blog i’m using Wp Exclusive Icon fonts plugin http://wordpress.org/extend/plugins/wp-elusive-iconfont/
    The advantage is it has more customizing options like changing color, size, orientation etc and also it has lots of other icons. Do check it.

    Reply
    • Avatar of Rajesh NamaseRajesh Namase

      Thanks Vivek for sharing this WordPress plugin with our readers.

      Reply
    • Avatar of James DreesenJames Dreesen

      Hey Vivek, thanks for sharing the plugin, I’ve looking for something like this. I would also try Font Awesome Icons to see which is the one for me. Nice article Rajesh, please keep it up! All the best to you.

      Reply
      • Avatar of Rajesh NamaseRajesh Namase

        Also try using Font Awesome WordPress plugin :)

        Reply
  2. Avatar of AndyAndy

    Hi, I was just looking for something like this, since I’m too lazy to create all these classes and add the styles and images into the theme. Thank you!!

    Reply
  3. Avatar of VipinVipin

    Thanks both Vivek and Rajesh, both provided the information i was looking for.

    Reply
  4. Avatar of rohit chougalerohit chougale

    hi rajesh

    ‘tell me about can we play video in php online if yes then tell me how..

    Reply
    • Avatar of Rajesh NamaseRajesh Namase

      You can try using HTML 5 video tags :) And it’s easy to use HTML 5 with PHP :)

      Reply
  5. Avatar of vaibhavvaibhav

    Il defently add this plugin to my wordpress acc..
    thanks admin..!

    Reply
  6. Avatar of Anand HittinaliAnand Hittinali

    well i’m not a man of many words so this plugin is really helpful to me. thanks for sharing this plugin.

    Reply
  7. Avatar of LilyLily

    There is a plugin for this stuff? Wow awesome my first time hearing it. Thank you for sharing this.

    Reply
  8. Avatar of Mohsin AliMohsin Ali

    Very interesting plugin Rajesh from where did you get these unique ideas.

    Reply
  9. Avatar of David CroftDavid Croft

    Hello,
    thanks for this nice blog, because this “Icon Fonts” topic is very new for me, so i can know many new things and new words within your blog.
    The Font generator is really the best free icon fonts which is currently available. so its very useful.

    Reply
  10. Avatar of David JohnsonDavid Johnson

    FYI, you used the term “Font Awesome generator” but your article covers Font Awesome itself, not a generator. The word “generator” has a specific meaning in the context of icon fonts. Examples of icon font generators that support Font Awesome include icnfnt and Fontello.

    Reply
    • Avatar of Rajesh NamaseRajesh Namase

      Okay, we’ve updated the article title, thanks.

      Reply
  11. Avatar of CarltonCarlton

    You left out one significant downside of icon fonts: they do not degrade gracefully. All users who have font download disabled (because they either are security-concious, used to be security-concious and forgot, or were configured by someone else who was security-concious and are unaware) just see ugly empty glyph symbols. To be a responsible icon font user, you must accept throwing those users under a bus.

    Reply
  12. Avatar of Ayush AgrawalAyush Agrawal

    This article seems a bit old but I would like to say that a good way of using font awesome is using its cdn : //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css.
    Helps bloggers looking to cut down load times.

    Reply
  13. Avatar of vikasvikas

    Nice post, Font Awesome is one of the best developments in the design world.

    Reply
  14. Avatar of Mark FoxMark Fox

    Thanks for sharing. I’m more inclined to use it now.

    Reply
  15. Avatar of Gaurav DuttGaurav Dutt

    Man! 2013, how could I haven’t seen this before but still worked flawless for me. Thanks for this.

    Reply

Add Your Comment Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Popular

How to Increase Broadband Speed on Windows

10 Best Android Launchers of 2021

Things to Do After Installing Windows 10 – Windows 10 Tips and Tricks

Top 10 Search Engines You Can Use to Search the Web Privately

55 Interesting Computer Facts That Will Blow Your Mind

What to Look for When Buying a Laptop – A Laptop Buying Guide

Fusion Drive Vs SSD – Things Nobody Tells you About Fusion vs SSD Storage

Useful Tools

• Grammarly – Free Grammar Checker
• SEMrush – The Best SEO Tool Trusted by Experts
• Setapp – One-stop subscription for Mac and iOS

Trending Topics

  • Android
  • Internet
  • iPhone
  • Linux
  • Macintosh
  • Security
  • Social Media
  • Technology
  • Windows

Worth Checking

10 Best Sound Equalizer for Windows 10 (2022 Edition!)

14 Best VLC Skins that are Highly Recommended and Free

Footer Logo Footer Text Logo

Footer

About

Hello and welcome to TechLila, the famous technology blog where you can find resourceful articles for mastering the basics and beyond.

At TechLila, our main goal is to provide unique information, such as quality tips and tricks, tutorials, how-to guides on Windows, Macintosh, Linux, Android, iPhone, Security and a few miscellaneous sub-topics such as reviews.

Links

  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms

Follow

Custom Theme Using Genesis Framework

Cloud hosting by Cloudways

Language

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright  2012–2023 TechLila. All Rights Reserved.