Getting Started With Font-Awesome

Introduction

Still using images for icons? Now in every other web site/web pages, we find intensive use of icons to help users navigate and understand easily the entire purpose. Making the icons simple and understandable from the user's point of view is what the motive is here. But using images for icons? Would that be fine? Would not that affect the page performance since the image has some size, right readers? Let me introduce you to a small package upgraded and lightweight and easy to use that makes the GUI so simple to implement. Let's get started.

Getting Started With Font-awesome

As the name itself suggests, this package is awesome. From a Github post:

These are simple text that can easily be manipulated like normal texts using the fonts. When you stretch or enlarge an image (PNG) icon it becomes blurred, it looks bad in simple language. If you enlarge any font from the package of Fontawesome then it would never become blurred or pixalated. Moreover no width and no height is required as used in images as attributes, just increase the font-size, it manipulates the icon. The best thing is this package can be downloaded from the Nuget Package or the Package Manager console too. The following image will show how to install the package from the PM Console.

As you can see in the preceding Image, you need to get to the PM Console window and hit the Yellowed Install command. Install-Package font-awesome -Version 4.1.0 After Installing you may encounter some error for the assembly package. That is the dependencies on this library and their version may cause some issue here. As for example that I have encountered when adding in my project was the assembly Web.Optimization since this version of this library requires version 1.1.3. If any package upgrade or update is required as its dependencies then without any hesitation just update the packages. In fact, the updates for the packages should be checked and updated regularly. After adding, the following files and folders will be added to the web project.

When added/installed two CSS files are added for font-awesome. Shockingly, the files are the same, why is that? Because a small difference between both of them can matter very much. The minified version of the CSS file is .min.css and that is small and light and provides good for performance. So, when adding the reference in the layout, the minified version is preferred or required actually.

The other thing that is added is shown in the preceding image. Let's get some information about the extensions of the files inside the folder. The following information is from some Wiki:

.eot: Embedded Open Type fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

.svg: This is common and known, but still, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

.ttf: This is developed by Apple, stands for True Type font. This means the font can be scaled to any font size even without tampering the quality.

.woff: Stands for Web Open Font Format. This is a font format to be used in the pages rendered on web, that is Webpage.

.otf: Stands for Open Type Font.

This was all about the extensions of the files in the folder.

Use

To use this as I have already said, we need to have the minified version of the CSS file in the layout itself, since the icons would be used intensively. The reference is as in the following:

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

Now to use the class out of the CSS defined classes, the use is as in the following:

<i class="fa fa-2x fa-fw "></i>

As you can see in the preceding snippet, this is the way fontawesome classes are defined in the <em>.css</em> file. Class fa is defined as in the following:

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

fa-fw is defined as in the following:

.fa-fw {
  width: 1.28571429em;
  text-align: center;
}

These are the definitions of the classes defined in the CSS. You think I have missed fa-2x? Okay guys, there are fa-1x, fa-3x and more since they represent the font-size simplified as <em>1em, 2em, 3em and similarly..</em> Then the actual class for the icon is to be used along with these that define its characteristics. The class name is prefixed with "fa-". The many icons along with the classes that can be used are given in the link/cheatsheet Font Awesome Cheatsheet You find many icons with their class name to be used. Just specify the name as in the following and see the icon onscreen. Even another fact is we can even change the color of the icon as we want, using the similar color CSS property.

<i class="fa fa-2x fa-fw fa-adjust"></i>

Conclusion

This is how this awesome Font Awesome can be used so simply in our projects. Thus reducing the time and size for the page being loaded. So start using this beautiful, light-weight and authentic library for the icons to be used.

References

Font Awesome Examples Wiki