CSS ICONS

❮ Prev Next ❯

Icon is a comprehensible symbol which is used to display something in the form of sign or symbol on the computer screen.

HOME

SERVER

CLONE

DOWNLOAD

TREE

How to add icons

To add icons to the webpage we use icon library. These icon libraries create these icons using CSS so you can add other CSS properties to it too; like color,shadow,size etc. These icons are embedded in webpage by using HTML tags like or

There are many icon libraries which you can use like

Font awesome icons
Google icons
Bootstrap icons

These icons libraries are added in the head section using link tag.

Font awesome icons

Add the icon library link in the head section of the webpage and use classes defined by font awesome in tag or tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons use classes like : fa-xs,fa-sm,fa-lg,fa-2x,fa-3x, ... ,fa-10x.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div style="text-align:center">
    <i class="fa fa-book"></i>
    <i class="fa fa-anchor"></i>
    <i class="fa fa-search fa-2x"></i>
    <i class="fa fa-heart" style="color:red"></i>
    <i class="fa fa-twitter" style="color:cyan"></i>
</div>
</body>
</html>

▶ Run the code

OUTPUT:

Google icons

Add icon library link in head section of webpage and use class material-icons in tag or tag and name of the icon is mentioned in between the tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons you can use CSS property font-size.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div style="text-align:center">
    <i class="material-icons">home</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons">search</i>
    <i class="material-icons" style="color:red">favourite</i>
    <i class="material-icons" style="color:cyan">computer</i>
</div>
</body>
</html>

▶ Run the code

OUTPUT:

Bootstrap icons

Add the icon library link in the head section of the webpage and use classes defined by Bootstrap icons in tag or tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons you can use CSS property font-size.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style="text-align:center">
    <i class="glyphicon glyphicon-home" style="font-size:1.5em;color:blue"></i>
    <i class="glyphicon glyphicon-user" style="font-size:2em"></i>
    <i class="glyphicon glyphicon-remove" style="font-size:2.5em"></i>
    <i class="glyphicon glyphicon-envelope" style="color:red;font-size:3em"></i>
    <i class="glyphicon glyphicon-cloud" style="color:cyan;font-size:3.5em"></i>
</div>
</body>
</html>

▶ Run the code

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯