Font Awesome & other Web Font Icons

Anuj Yadav
2 min readFeb 4, 2019

As a Web Developer whether you are building a E-Commerce portal or a static SPA it’s common to get in situation that might require you to look for icons whether they are social media logos, currency logos or any other icons to easily integrate to your web application.The below mentioned resources are easy to use for developers and contains code and links to help them use it in their project.

Material Icons

Material Design by default uses Material Icons, Material Icons are created by
Google and are free to use and can also be used with other frameworks and UI component libraries.The syntax of using the icons in html file is little different than other mentioned icon providers ,material icons also known as google icons club the icon name between <i> tag instead of passing it as a class.

<i class="material-icons">wifi</i>
<i class="material-icons">account_box</i>

To use material icons paste the link tag in head section of your html code

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

Font Awesome

Font Awesome is one of the top open source projects on github. Font Awesome can be used with bootstrap,angular and wordpress. Font Awesome was created by Dave Gandy. Simplicity to use, easy integration with many technologies & frameworks along with large collection of icons to choose from (font awesome has more than 5000 icons and out of them 1500 are free to use) makes it one of the best choice for designers and developers.Font Awesome has made developers life easy as it is one of the most complete solution for icons as they are part of Icon Fonts adjusting the icon size is very simplistic as it can be done with font-size property.

Font Awesome icons can be used after simple paste of below link tag

<link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.1/ css/all.css" integrity="sha384fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

PrimeIcons

PrimeIcons is the new official font-icon library from PrimeTek to be shared
between PrimeReact and other future Prime UI Suites, PrimeIcons are also
internally used by PrimeNg (PrimeNG is a collection of free & open-source rich UI components for Angular). PrimeIcons use the pi pi-{icon} syntax as

<i class="pi pi-check"></i>
<i class="pi pi-times"></i>

Glyphicons

Glyphicons are used with bootstrap.Glyphicons includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator Jan Kovařík who created them in 2010 has made them available for Bootstrap free of cost. <span> or <i> tags are used for Glyphicons in Bootstrap.

--

--