Skip to content
Related Articles

Related Articles

Improve Article

CSS Icons

  • Difficulty Level : Easy
  • Last Updated : 21 Sep, 2021
Geek Week

In this article, we will know how to use the icons to add to the HTML page from the icon library. Icons can be added to our HTML page from the available icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, color, shadow, etc. The icon is a graphical representation that conveys the specific meaning for which it is used for & helps to navigate accordingly.

There are 3 types of icon libraries available, namely

  • Font Awesome Icons
  • Google Icons
  • Bootstrap Icons

We will include the required CDN link from the available icon library, which will help us to use the pre-defined icon classes or we can customise it using the CSS.

Approach: In order to use icons, we need to add the required CDN link inside the <head> section. The following steps to add the predefined class in the HTML:

  • Add the name of the icon class to any inline HTML element.
  • The <i> and <span> elements are widely used to add icons.
  • All the icons are scalable vector icons that can be customized with the required CSS properties such as size, color, shadow, etc.

Note: All the above-mentioned library does not require any downloading or installation.



Method 1: Font Awesome Icons

To use Font Awesome Icons, add the following link inside the <head> section.

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

Syntax:

<i class="fa fa-cloud"></i>

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property.

Example 1: In this example, we have used the font-size property with each icon class & whose value is set to 32px.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
        <i class="fa fa-cloud" style="font-size:32px;"></i>
        <i class="fa fa-heart" style="font-size:32px;"></i>
        <i class="fa fa-file" style="font-size:32px;"></i>
        <i class="fa fa-car" style="font-size:32px;"></i>
        <i class="fa fa-bars" style="font-size:32px;"></i>
</body>
</html>

Output:

Example 2: In this example, we have used the “fa fa-heart” class having the font-size property & color property whose values is set to 28px & red, blue respectively.



HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <i class="fa fa-heart" style="font-size:28px;color:red;"></i>
    <i class="fa fa-heart" style="font-size:30px;color:blue;"></i>
    <i class="fa fa-heart" style="font-size:32px;color:red;"></i>
    <i class="fa fa-heart" style="font-size:34px;color:blue;"></i>
    <i class="fa fa-heart" style="font-size:36px;color:red;"></i>
</body>
</html>

Output:

Method 2: Google Icons

To use Google Icons, add the following link inside the <head> section. 

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

Syntax:

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

Please refer to the How to use Google material icon as list-style in a webpage using HTML and CSS? article to know how to use CSS properties with the pre-defined class.

Example 1: In this example, we have used the “material-icons” class with the required icon.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <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>
</body>
</html>

Output:

Example 2: In this example, we have used the “material-icons” class with the cloud shape.



HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="material-icons" style="font-size:30px;">cloud</i>
    <i class="material-icons" style="font-size:40px;">cloud</i>
    <i class="material-icons" style="font-size:50px;">cloud</i>
    <i class="material-icons" style="font-size:60px;">cloud</i>
    <i class="material-icons" style="font-size:70px;">cloud</i>
</body>
</html>

Output:

Method 3: Bootstrap Icons

To use Bootstrap Icons add the following link inside the <head> section.

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

Syntax:

<i class="glyphicon glyphicon-cloud"></i>

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property with the pre-defined class.

Example 1: In this example, we have used the font-size property with each glyphicon class & all the value is set to different numbers.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="glyphicon glyphicon-cloud" style="font-size:28px;"></i>
    <i class="glyphicon glyphicon-user" style="font-size:30px;"></i>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:32px;"></i>
    <i class="glyphicon glyphicon-remove" style="font-size:34px;"></i>
    <i class="glyphicon glyphicon-envelope" style="font-size:36px;"></i>
</body>
</html>

Output:

Example 2: In this example, we have used the “glyphicon glyphicon-thumbs-up” class with the thumbs-up shape & all the value is set to different numbers.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:20px;"></i>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:30px;"></i>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:40px;"></i>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:50px;"></i>
    <i class="glyphicon glyphicon-thumbs-up" style="font-size:60px;"></i>
</body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :