When building a web application, it is common that you will need icons in the UI. Traditionally, this has been done with images (e.g. png, jpg) which leads to a lot of resource management.
- Figure: Bad example - using images for application icons
This is simplified if you are using Bootstrap, as it comes with a font-based icon library you can use in your web application. However, there is an even better third-party font-based icon library you should use when using Bootstrap.
Font Awesome provides scalable vector icons which can be customized purely through CSS and is completely free for commercial projects. This is great if you’re tight on implementation deadlines, but is no replacement for a specifically designed icon set. However, if you need generic icons in a hurry, then use Font Awesome.
Using it on your project is easy, just add the following stylesheet to your app:
Then you have access to over 350 icons. Here are a few commonly used ones:
- Figure: Examples of Font Awesome icons
The HTML is easy, e.g. to add the above trashbin icon.
You can also download and reference Font Awesome locally.
- Figure: After adding Font Awesome from NuGet, two lines of code add the below icon
- Figure: A 5x scaled paper plane icon has been added to my Web Application
You can get Font Awesome from NuGet or http://fontawesome.io.