Skip to content
  • Home
  • Contact
  • COVID
  • My Portfolio
Sonahang RaiPersonal Blogs
  • Home
  • Contact
  • COVID
  • My Portfolio
Web Design Tutorials

Flaticon as Webfont’s

On August 3, 2020 by Sonahang Rai

Today we will learn how to use flaticon as webfont’s. Firstly lets know something about the flaticon. Flaticon is a product of freepik company. Freepik company offers the best high-quality content. They are illustrations, photos, icons, mockups, and presentations templates. This flaticon is the specific for the icons only.

The flaticon provide lots of free and premium icons. Lots of icon designers submit their icon to the flaticon. 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.

Today we will use the flaticon as webfonts in this article.

Firstly you are recommended to register for the free account at the flaticon official webpage.

flaticon

You may not need to manually enter your detail. You can login from either google, facebook or twitter accounts.

After registering login to your account. You can see a collection icon just below your profile picture.

flaticon collections

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.

flaticon collections
Collections of Icons

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.

flaticon hover

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.

flaticon download

You have to download as icon font to use it as webfonts. Also you can download as svg.

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.

Flaticon Extracted folder

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 webpages header. Finally we implemented the flaticon as webfont’s in our webpages.

Tags: flaticons, icons, webdesigns, webfonts

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CAPTCHA


Archives

  • November 2022
  • November 2021
  • August 2021
  • April 2021
  • March 2021
  • August 2020
  • July 2020
  • April 2020

Calendar

March 2023
S M T W T F S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Nov    

Categories

  • Javascript
  • Next
  • React
  • SEO
  • Web Design (Slicing)
  • Web Design Tutorials
  • Wordpress

Copyright Sonahang Rai 2023 | Theme by ThemeinProgress | Proudly powered by WordPress