CSS Icons

How To Add Icons

First add the icon library in the webpage, then add the name of the specified icon class present in the added library to any inline HTML element like <i> or <span>.


Font Awesome Icons

Font awesome library consist of various icons of different sizes. It can be added by adding following line in the <head> section of the webpage :

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Awsome Icons </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css">
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fa fa-heart"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-file"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

Output

CSS Font Awsome Icons

Some Font Awesome icons:

Styled Font Awesome icons (size and color):


Bootstrap Icons

The Bootstrap glyphicons can be added by including following line inside the <head> section of the webpage

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Icons </title>
<meta charset="UTF-8">
</head>
<body>
<p>Some Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
<p>Styled Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
</body>
</html>

Output

Bootstrap Icons

Some Bootstrap icons:



Styled Bootstrap icons:


Google Icons

The Google icons, can be added by including following line inside the <head> section of the webpage :

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> Google Icons </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts>googleapis>com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons :</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:24px;">cloud</i>
</body>
</html>

Output

Google Icons

Some Google icons:

cloud favorite attachment computer traffic

Styled Google icons :

cloud cloud cloud cloud cloud cloud cloud cloud



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements