CSS - Icons

As the name suggests, CSS Icons is used to add Icons to your HTML page.

How to add Icons in CSS?

We can add icons in CSS using the CSS background images or Icon fonts.

Let is see them in detail.

Adding icons to CSS using Google Icons

So, we would be using Google Icons to CSS using a link provided by Google.

Example :

<html>
<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">	
</head>
	
<body>
	<i class="material-icons">favorite</i>
</body>
</html>

Output :

So, if you see the above example, we have used the material-icons font provided by google.

And all we have done is used the link https://fonts.googleapis.com/icon?family=Material+Icons, provided by google in the href attribute of <link> tag.

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

So, if you see the link provided by google, at the very end we have specified the Material+Icons name. The Material+Icons adds the list of Icons from Google.

And we have used the class attribute of <i> element to add icons from Google.

<i class="material-icons">favorite</i>

In this example we have used the favorite icon from Google by specifying its value. However, we can use other icons as well.

Say, for example we want a computer icon, in that case we use the computer icon.

<i class="material-icons">computer</i>

Adding Icons to CSS using Bootstrap Icons

So, we would be using Bootstrap Icons to CSS using a link provided by Bootstrap.

Example :

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">	
</head>
	
<body>
	<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

Output :

So, if you see the above example, we have used the glyphicon font provided by bootstrap.

And all we have done is used the link https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css, provided by bootstrap in the href attribute of <link> tag.

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

And we have used the class attribute of <i> element to add icons from Bootstrap.

<i class="glyphicon glyphicon-thumbs-up"></i>

In this example we have used the glyphicon-thumbs-up icon from Bootstrap's glyphicon by specifying its value. And as a result we can see a like icon provided by Bootstrap.

Adding Icons to CSS using background images by CSS

We can use the background-image property of CSS to add an icon.

Example :

<html>
<head>
    <style>
        p.icon {
            width: 50px;
            height: 50px;
            background-image: url('images/learnerslesson_logo.png');
            background-size: cover;
        }
    </style>
</head>

	<body>
   		<p class="icon"> </p>
	</body>
</html>

Output :

So, in the above example, we have taken the logo of learnerslesson(i.e. learnerslesson_logo.png) and added using the background-image property of CSS.

<style>
	p.icon {
		width: 50px;
		height: 50px;
		background-image: url('images/learnerslesson_logo.png');
		background-size: cover;
	}
</style>

And the background image is added as logo to the HTML page.

❮❮ PREV NEXT ❯❯