Font Awesome
Font Awesome provides us with
Scalable Vector Icons. They are easy to use, and customizable as well. You may
change size, color, drop shadow and many more styles of the icons.
Some of the salient features of the
Font Awesome project are listed below:
- Font Awesome 5 has a PRO
edition with 4845 icons, and a FREE edition with 1480 icons and that all
with a single font.
- It's free (as free as free
beer).
- Though it created out of
Twitter Bootstrap, it works seamlessly with other CSS frameworks too.
- Since it does not require
JavaScript, browser compatibility issues are minimal.
- With the help of CSS, you may easily
modify the look and feel for eg. Color, size, drop shadow etc. of icons.
- Since these are based on SVG,
they rendering quality is good in all sizes. Font awesome icons look
awesome even on high resolution displays.
- Unlike many other Icon fonts, Font Awesome are screen reader friendly.
Usage
To use the Free Font Awesome 5
icons, add the following <link> element inside the <head> section
of your HTML page and display icons by using a class attribute with the prefix has followed
by the icon's name.
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
</head>
New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.
The s in fas stands for solid, and some icons also have a regular mode, specified by using the prefix far
Font Awesome is designed to be used with inline elements.The
Font Awesome is designed to be used with inline elements.The
<i> and <span> elements are widely used for icons. Font-size or color changes can be done on the icon using style tag element.