CSS Icons
Icons can easily be added to our HTML page, by using an icon library.
How To Add Icons
The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
CSS icons are symbols or graphical representations that are created using
CSS (Cascading Style Sheets) rather than traditional image formats like PNG or SVG.
They are often used in web design to add visual elements to a website without relying on image files.
There are a few common methods for creating CSS icons:
Font Icons:
These are icons created from special icon fonts such as Font Awesome, Material Icons, or Ion icons. These fonts contain a set of glyphs (symbols) that can be styled with CSS.
For example
you might use a class like .fa-heart to add a heart icon to your HTML, and then style it with CSS properties.
CSS Shapes:
Icons can be created using pure CSS by styling HTML elements (like <div>, <span>, etc.) with CSS properties such as border, border-radius, background, and transform. This method is often used for simple geometric shapes or custom designs.
CSS icons offer several advantages, including scalability, ease of customization, and potentially smaller file sizes compared to images. They can be a versatile and efficient way to add visual elements to your web design.
Font Awesome
Include Font Awesome in your project:
Add this line to the <head> of your HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Use an icon
To use an icon, add a <i> or <span>element with the appropriate classes:
<i class="fas fa-camera"></i>
Material Icons
Include Material Icons in your project:
Add this line to the
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Use an icon
To use an icon, add a <i> element with the class material-icons and the icon name:
<i class="material-icons">camera_alt</i>
2. Using CSS for Custom Icons
You can also create your own icons with CSS. Here’s a simple example using pure CSS:
Create a basic HTML structure
<div class="icon-star"></div>
Add CSS to style your icon
.icon-star {
display: inline-block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gold;
position: relative;
transform: rotate(35deg);
}
.icon-star:before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gold;
transform: rotate(-70deg);
}
This CSS snippet creates a simple star shape using borders and positioning.
3. SVG Icons
You can also use SVGs for high-quality icons:
Inline SVG
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>
Using SVG as a background image
.icon {
width: 24px;
height: 24px;
background: url('data:image/svg+xml;base64,...') no-repeat center center;
background-size: contain;
}
Tips
Size and Color: For font icons and inline SVGs, you can adjust the size with font-size or the width and height properties, and change the color with color or fill for SVGs.
Accessibility: Always consider accessibility by adding descriptive text or aria attributes where needed.
Feel free to experiment and mix different methods to find what works best for your project!
Top comments (0)