CSS Icons
CSS
CSS icons generally refer to the use of icon libraries and cascading style sheets to display and style scalable vector graphics (icons) on a webpage.
CSS Icons.
➔ Font-Awesome Icons: A very popular and extensive library that offers a wide range of free and premium icons that can be suitable for any project.
➔ Google Material Symbols and Icons: Google offers a modern and extensive collection of icons that are available in different design variants and are best suited for any project.
➔ Bootstrap Icons: A free, high-quality, open-source icon library designed for and usable in any project.
Example (font-awesome icons)
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
</head>
<body>
<p>Font-awesone Icons Example</p>
<i class="fa-solid fa-car fa-lg"></i>
<i class="fa-solid fa-car fa-2x"></i>
<i class="fa-solid fa-car fa-3x"></i>
<i class="fa-solid fa-car fa-4x"></i>
<i style="color:red;" class="fa fa-car fa-5x"></i><br>
<i class="fa-solid fa-home fa-lg"></i>
<i style="color:red;" class="fa-solid fa-home fa-2x"></i>
<i class="fa-solid fa-home fa-3x"></i>
<i style="color:red;" class="fa-regular fa-home fa-4x"></i>
<i class="fa-regular fa-home fa-5x"></i><br>
<span class="fa fa-gear fa-lg"></span>
<span class="fa fa-gear fa-2x"></span>
<span class="fa-solid fa-gear fa-3x"></span>
<span class="fa-solid fa-gear fa-4x"></span>
<span style="color:red;" class="fa-solid fa-gear fa-5x"></span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (Google Materials Symbol)
<!DOCTYPE html>
<html>
<head>
<title>Google Material Symbols, Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Symbol names are in alphabetical order -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,0&icon_names=close,favorite,home,menu,search,settings,star,start" />
</head>
<body>
<h3>Google Material Symbols, Icons Example</h3>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">star</span>
<span class="material-symbols-outlined">start</span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (Bootstrap Icons)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<p>Bootstrap Icons Example</p>
<i class="bi bi-alarm"></i><br>
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i><br>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.