CSS Icons
CSS Icons from various libraries can be effortlessly styled and customized with CSS, allowing for alterations in size, color, shadow, and more. These icons serve as intuitive graphical elements, enhancing navigation and conveying specific meanings.
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 customize it using the CSS.
Table of Content
- Using Icons with CSS
- Font Awesome Icons
- Google Icons
- Bootstrap Icons
Using Icons with CSS
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 libraries do not require any downloading or installation.
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.
<!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>w3wiki</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.
<!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>w3wiki</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:
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>GeekforBeginner</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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>GeekforBeginner</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:
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>GeekforBeginner</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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>GeekforBeginner</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:
Contact Us