CSS Icons - GeeksforGeeks

16 Dec, 2021
In this article, we will know how to use the CSS icons to add to the HTML page from the 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 CSS 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></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="https://fonts.googleapis.com/icon?family=Material+Icons"></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="https://fonts.googleapis.com/icon?family=Material+Icons"></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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></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.
bhaskargeeksforgeeks
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?