Font Awesome a web font is a way to add scalable and beautiful icons on your website. It is a type of font or type of CSS. It was made by Dave Gandy released on 21 August 2012. On 7 December 2017 Font Awesome latest version was released with more than 1200 icons. It is free for use and everyone can use this.
Advantage Of Using The Font Awesome Icons
- Images take a lot of space due to their file size. As a font, its file is very small it means that there is a need for just one HTTP request to the server. And load fast because of their small size.
- It is difficult to use a lot of images on a website as these images use a lot of spacing. It can also be too difficult to manage these images that could blur or stretched. So designers love to use of font awesome because of the flexibility of styling and render icons as sharp as device allow.
- Font awesome gives us possibility of styling that can instantly be customized size, color, drop shadow, change opacity within the various regions of website like header, menu bar, sidebar, content etc.
- Font Awesome gives us high quality icons and neatness not only in web devices but also on mobile devices. So it is helpful in the current scenario of responsive designs.
- There is no need to worry about font awesome’s browser compatibility issue. All modern browsers support well font awesome.
Using Font Awesome
- Go to the Font Awesome Official Page and download package folder.
- Decompress the file.
- Go to font-awesome CSS folder, copy font-awesome.min.css and paste it into your CSS folder.
- In the Head section of your HTML the location of the font-awesome.min.css should be referenced like:
- The font path being relative from your CSS directory.
- Now go to font-awesome fonts folder copy that and paste in to your project fonts folder.
Font Awesome now ready to use. In order to use the icons, you can use them inside either a span or an i element. Then, you have to assign them two classes. The .fa class plus a second class, which should be the name of the icon you want to add to your project. This connects to the Font Awesome font. To display the correct icon, the second class name will correspond with the icon you wish to display, in this case it is fa-car.
This shows using font in HTML. If we take a look at the CSS file, we will see that we are using CSS selectors which inserts the content before the HTML. There are many occasions where i will be good opportunity to use pseudo class. Font awesome also works in this scenario.
.title:before {
font-family: FontAwesome;
content: "\f1b9";
}
Font Awesome Options
Font Awesome offers more than what others realize. It’s easy to rotate, large, fix width, pull, flip, and scale. Also, there are animation options that come right out of the box. We can rotate, animate and flip icons with its given classes. Read more options if you need Font Awesome Options
Font Awesome is the best free icon fonts. Font Awesome also works great with all the Bootstrap components. It was designed for use with Twitter Bootstrap, but it can be adapted for use on regular websites.
.webp)
