Font Awesome Examples Without Bootstrap Framework

Update: Use of Font Awesome the easier way: Using Font Awesome 4 for Getting Icons.

Font Awesome is developed for Bootstrap FrontEnd Framework. It includes 370 icons and most of them are free. It is svg images so font is good in any display. I will present two ways to use FontAwesome on pages. Using Bootstrap Framework is not required to use these examples.

Many of us liked the Font Awesome but do not want to use Bootstrap Framework. This example guide is useful in using FontAwesome without Bootstrap.

Font Awesome Example Code:

FontAwesome Demo page.

First download the FontAwesome CSS file. Include the css file

<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" type="text/css" media="screen, projection">

Unminified version of CSS file is also there which you can look at.

Now, very simple HTML to use FontAwesome:

<span data-icon="&#xf09a;"></span>

Simple CSS code for displaying Icons as well:

[data-icon]:before {
  font-family: 'FontAwesome';
  font-size: 130%;
  color: gray;
  margin-right: .5em;
  content: attr(data-icon);
  speak: none;
}
.icon-alone {
  display: inline-block;
}

That is all for FontAwesome to use. CSS is very simple and same CSS is going to work for other icons you want to display. Just write your HTML for particular icon you want there using this FontAwesome cheatsheet. Cheatsheet has all the unicode (&#xf09a; for facebook) for icons.

For Facebook, Twitter and RSS, I have used this HTML:

<div class="social-share" >
<a href="#" class="icon-alone">
            <span aria-hidden="true" data-icon="&#xf09a;"></span>
            <span class="screen-reader-text">Facebook</span>
        </a>
        <a href="#" class="icon-alone">
            <span aria-hidden="true" data-icon="&#xf099;"></span>
            <span class="screen-reader-text">Twitter</span>
        </a>
        <a href="#" class="icon-alone">
            <span aria-hidden="true" data-icon="&#xf09e;"></span>
            <span class="screen-reader-text">RSS</span>
        </a>
</div>

and, added css class .social-share to the CSS code shown above. In above code, to club all icons together, I have used a div with that class. In the above HTML "aria-hidden="true"" and screen reader line can be removed.

Another Way: This helps in using font Awesome on any element without font awesome classes (fo-*).


<span id="facebook" onclick="javascript:socialShare('fb')" ></span>
<span id="twitter"  onclick="socialShare('twitter')" ></span>
<span id="rss"  onclick="socialShare('rss')" aria-hidden="true"></span>

.social-share span  {
    font-family: 'FontAwesome';
    font-size: 150%;
    cursor: pointer;
    color: gray;
    display: inline-block;
    margin-right: .5em;
}
#facebook:before {
    content: "\f082";
}
#twitter:before {
    content: "\f099";
}
#rss:before{
    content: "\f09e";
}*/

Those onclick etc was what I thought to use earlier but latter shifted to 1st style of using Awesome code. First style of coding is inspired by this blog post at CSS-Tricks. That is about IconFont.

Comments are open for an year period. Please, write here on Facebook page.