CSS ICONS
Icon is a comprehensible symbol which is used to display something in the form of sign or symbol on the computer screen.
HOME
SERVER
SEARCH
CLONE
DOWNLOAD
TREE
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 <i> or <span>
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 <i> tag or <span> 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 <i> tag or <span> 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 <i> tag or <span> 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