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  or .

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 :

Example Try this code »

<!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>
Some Font Awesome icons:





Styled Font Awesome icons (size and color):




</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

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Icons </title>
<meta charset="UTF-8">
</head>
<body>
Some Bootstrap icons:





 
Styled Bootstrap icons:








</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 :

Example Try this code »

<!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>
Some Google icons:
cloud
favorite
attachment
computer
traffic
 
Styled Google icons :
cloud
cloud
cloud
cloud
cloud
cloud
cloud
cloud
</body>
</html>

Output

Google Icons

Some Google icons:

Styled Google icons :

5 . CSS beautiful buttons
6 . How to use CSS 3D Transform ?
7 . Create Simple Login Form
8 . Photography Snippets using HTML and CSS

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors