Getting Started With Font-Awesome

Still, using images for icons? Now on every other web site/web page, 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.

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 pixelated. 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 well 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: