Pure CSS Icons
Last Updated :
10 Oct, 2021
In this article, we will learn how to use icons in Pure CSS & will understand its implementation through examples. Pure CSS does not have any icon component, there are so many icon packages available that can be used in Pure CSS. In all of those icon packages, there are 3 most and easy use icons packages that are described below:
- Font Awesome Icons: Font-awesome is a web icon library that gives you scalable vector icons that can be customized in terms of color, size, and in many more aspects.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
- Google Material Icons: Icons can be added to our 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.
https://fonts.googleapis.com/icon?family=Material+Icons
- Bootstrap Icons: Bootstrap Icons are designed to figure with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, in order that they scale quickly and simply.
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
The below examples will illustrate the use of these packages with Pure CSS.
Example 1: In this example, we will use a fire icon for 3 different packages. These icons have different appearances with different classes for these 3 packages.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Pure CSS Icon</h2>
<strong>Font Awesome Icons</strong>
<i class="fa fa-fire"></i>
<br />
<strong>Google Material Design Icons</strong>
<i class="material-icons">whatshot</i>
<br />
<strong>Bootstrap Icons</strong>
<i class="glyphicon glyphicon-fire"></i>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of button icons in Pure CSS. We will utilize the same example that we have used above & implement the button icon on it. Please refer to the How to use buttons with icons using Pure CSS? article for further details.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Pure CSS Icon</h2>
<strong>Font Awesome Icons</strong>
<button>
<i class="fa fa-fire"></i>
</button>
<br />
<strong>Google Material Design Icons</strong>
<button>
<i class="material-icons">whatshot</i>
</button>
<br />
<strong>Bootstrap Icons</strong>
<button>
<i class="glyphicon glyphicon-fire"></i>
</button>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...