WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Icons Tutorial


In this chapter we discuss HTML icon.


Font Awesome Icons

We can use Font Awesome icons, add the following line inside the <head> section of your HTML page

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-shopping-basket"></i>
<i class="fa fa-barcode"></i>
<i class="fa fa-birthday-cake"></i>
<i class="fa fa-university"></i>
<i class="fa fa-bank"></i>

</body>
</html>
Try It Yourself »

Bootstrap Icons

another, Second method we can use Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-btc"></i>
<i class="glyphicon glyphicon-queen"></i>
<i class="glyphicon glyphicon-sound-stereo"></i>
<i class="glyphicon glyphicon-tree-conifer"></i>
<i class="glyphicon glyphicon-king"></i>

</body>
</html>
Try It Yourself »

Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

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

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">school</i>
<i class="material-icons">Mobile</i>
<i class="material-icons">Home</i>
<i class="material-icons">computer</i>
<i class="material-icons">Park</i>

</body>
</html>
Try It Yourself »