Implementing Font Awesome 5
Font Awesome 5 is an icon set and toolkit making it easy for web designers to add vector icons and social icons to websites. We had been using Font Awesome since version 3 and we explored version 5 soon after its release.
For any website, Fonts in Websites play a significant impact on UI/UX.
Font Awesome is just awesome!!
The main reason for Font Awesome 5 doing great is that it has been a popular repository and has yet to find a competitor of its par. They provide a wide range of icon sets; none of the other icon packs provide such versatility and compatibility.
Styles of FontAwesome 5
- Solid
- Regular
- Light
- Brands
|
| Font Awesome 5 icons |
Font Awesome 5 Versions
- Free
- Pro
Font Awesome 5 official documentation states that we may get a Pro license for $60 with 1,718 more icons than the free version's 989 icons. Icons of light styles come with the Pro version.
Font Awesome 5 comes in two formats:
- Web fonts for embedding in our project file.
- Desktop fonts as SVG and OTF format.
Categories and Implementation
In Font Awesome 4, the class fa is added to the i tag. In Font Awesome 5, classes fab, far, fas, and fal are used to represent icons from Brand, Regular, Solid, and Light styles respectively. If missed, icons are not converted into SVG.
<div class="font-wrap"><i class="fab fa-facebook"></i></div>
<div class="font-wrap"><i class="far fa-address-book"></i></div>
<div class="font-wrap"><i class="fas fa-arrow-right"></i></div>
<div class="font-wrap"><i class="fal fa-certificate"></i></div>
CSS applied to the outer div:
.font-wrap {
font-size: 40px;
color: #fc8a25;
display: inline-block;
margin: 5px;
}
Adding Pseudo-elements using SVG with JS
If Font Awesome 5 icons need to be added as pseudo-elements, it is better to follow the alternative technique of Web Fonts with CSS. However, if using SVG with JS, you must configure the following:
<script>
window.FontAwesomeConfig = { searchPseudoElements: true }
</script>
Sizing of Icons
Sizing classes include fa-xs, fa-sm, fa-lg, and fa-2x up to fa-10x.
Comments
Post a Comment