Today we will learn how to use Flaticon as webfont. Firstly lets know something about the Flaticon.
Flaticon is a product of Freepik company. Freepik company offers the best high-quality content. They are into illustrations, photos, icons, mockups, and presentations templates.
Flaticon is specific for the icons only from Freepik company.
Flaticon provide lots of free and premium icons. Many of them are free of cost. It has more icons then the Fontawesome’s icon library. The icon can be downloaded as lots of format either picture format or other webfont formats.
So the steps to use Flaticon as webfont are as follows:
Steps to use Flaticon as Webfont
Step 1: Firstly you need to register for a free account then take a paid subscription.
Step 2: After registering login to your account. You can see a collection icon just below your profile picture.
Click it and you can see the collection of your icons. You can create more than one collection and add icons to them. You can give a custom name to your collections too.
Step 3: To add icon to your collection simply find your desired icon and hover to it. You can see an add icon to collection like the picture below.
Step 4: You can add more then one desired icon to your collection. And finally after you finished adding the icons to your collection, we will download them.
Now here we will download them as a webfont. Click download button and you can see lots of options.
You need to download as icon font to use it as webfont.
Step 5: After you completely downloaded the file. Extract them to your website folder. You can see lots of files. But fonts folder will be the main files for the fonts to work.
You can find flaticon.html file. This file will contain all the class name for your icon.
Step 6: You can now use either i or span tag with the desired class name from the flaticon.html. Also do not forget to include the flaticon.css in your webpage’s head section.
Use the classes of each icon and they will appear on your website. Then, manipulate them with CSS.
Finally we implemented the Flaticon as webfont in our sample webpage.
Final Output:
Add comment