Icon fonts are used to include certain standard icons in your website content. The Font ‘Awesome’ is a good example that offers many advantages over other icon fonts. We also suggest using Icon fonts from Freepik as a good alternative.
Font Awesome was originally designed by Dave Gandy for use with Twitter Bootstrap. Font Awesome can be used with WordPress 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:
And also the new icons that come with version 3.0:
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.
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!’
- 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.
- 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?
- 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/
What people are saying
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.
Thanks Vivek for sharing this WordPress plugin with our readers.
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.
Also try using Font Awesome WordPress plugin :)
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!!
Thanks both Vivek and Rajesh, both provided the information i was looking for.
‘tell me about can we play video in php online if yes then tell me how..
You can try using HTML 5 video tags :) And it’s easy to use HTML 5 with PHP :)
Il defently add this plugin to my wordpress acc..
well i’m not a man of many words so this plugin is really helpful to me. thanks for sharing this plugin.
There is a plugin for this stuff? Wow awesome my first time hearing it. Thank you for sharing this.
Very interesting plugin Rajesh from where did you get these unique ideas.
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.
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.
Okay, we’ve updated the article title, thanks.
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.
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.
Nice post, Font Awesome is one of the best developments in the design world.
Thanks for sharing. I’m more inclined to use it now.
Man! 2013, how could I haven’t seen this before but still worked flawless for me. Thanks for this.