Here we will learn font icons or web icons tutorial with examples, different type of font icon libraries, font awesome icons, boostrap glyphicons, google material icons tutorials with example.
Generally font icons are the symbols which are used to represent some action on web page in applications. Font icons are the scalable vector icons and that can be customized by using css like changing the color, size, shadow, etc. based on our requirements.
We have number of font icon libraries available to use it as normal font in html / web pages based on our requirements.
From the list of multiple font icon libraries following are the most popular font icon libraries.
All these libraries provide scalable vector icons that can be customized by using CSS like changing style, size, color, shadow, etc.
Font awesome library provides scalable vector icons which can be easily customizable like changing the size, color, etc. by using CSS.
To use font awesome icons in our application we need to add following font awesome CSS file in our application header (<head>) section.
Once we add above URL reference in header section of our application then we can start using font awesome icons we don’t need to do any separate installation or downloads.
We can use font awesome icons with <i> or <span> tag along with CSS prefix fa and icons name like as shown following
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<title></title>
</head>
<body>
<i class="fa fa-desktop"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-key"></i>
</body>
</html>
If you observe above example we added font awesome css library in <head> section and added icons desktop, diamond and key.
Following is the result of using font awesome icons in application.
To use bootstrap glyphicons in our application we need to add following url reference in header (<head>) section of our application
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Once we add reference in our application we can start using bootstrap icons with <i> or <span> tag along with CSS prefix glyphicon and icons name like as shown following
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title></title>
</head>
<body>
<i class="glyphicon glyphicon-asterisk"></i>
<i class="glyphicon glyphicon-film"></i>
<i class="glyphicon glyphicon-repeat"></i>
</body>
</html>
If you observe above example we added bootstrap css library in <head> section and added icons asterisk, film and repeat.
Following is the result of using bootstrap glyphicons in application.
To use google material icons we need to add following url in header (<head>) section of our application.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Once we add reference in our application we can start using material icons with <i> or <span> tag along with css prefix material-icons and icons name like as shown following
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">face</i>
<i class="material-icons">alarm</i>
<i class="material-icons">android</i>
</body>
</html>
If you observe above example we added google material design css library in <head> section and added icons face, alarm and android.
Following is the result of using google material design icons in application.
This is how we can use font awesome, bootstrap and google material design icons in our applications based on requirements.