CSS Icons Tutorial - codeswithpankaj.com
CSS icons are used to enhance the visual aspect of a website by providing graphical representations of actions or features. They can be added using icon libraries, such as Font Awesome or Material Icons, or by using custom icon fonts or SVGs.
1. Using Icon Libraries
Icon libraries provide a wide range of icons that can be easily integrated into your web project. Here, we'll demonstrate how to use Font Awesome.
Example:
Include the Font Awesome library in your HTML:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Icons - codeswithpankaj.com</ title >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >
</ head >
< body >
< i class = "fas fa-home" ></ i > Home - codeswithpankaj
</ body >
</ html >
In this example, the Font Awesome library is included, and the home icon is added using the <i>
tag with the class fas fa-home
.
2. Custom Icon Fonts
You can create custom icon fonts using tools like IcoMoon. Once you have your custom font, you can include it in your project.
Example:
Include the custom font in your CSS:
Copy @font-face {
font-family : 'CustomIcons' ;
src : url ( 'custom-icons.woff2' ) format ( 'woff2' ) ;
}
.icon {
font-family : 'CustomIcons' ;
}
Use the custom icons in your HTML:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Custom Icon Fonts - codeswithpankaj.com</ title >
< style >
@font-face {
font-family : 'CustomIcons' ;
src : url ( 'custom-icons.woff2' ) format ( 'woff2' ) ;
}
.icon {
font-family : 'CustomIcons' ;
}
.icon-home:before {
content : '\e900' ;
}
</ style >
</ head >
< body >
< span class = "icon icon-home" ></ span > Custom Home Icon - codeswithpankaj
</ body >
</ html >
In this example, a custom icon font is included, and the home icon is used with the icon-home
class.
3. Using SVG Icons
SVG (Scalable Vector Graphics) icons provide high-quality, scalable graphics that can be easily styled with CSS.
Example:
Include the SVG icon directly in your HTML:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >SVG Icons - codeswithpankaj.com</ title >
< style >
.icon {
width : 24 px ;
height : 24 px ;
fill : currentColor ;
}
</ style >
</ head >
< body >
< svg class = "icon" viewBox = "0 0 24 24" >
< path d = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM11 17h-2v-6h2v6zm0-8h-2V7h2v2z" />
</ svg >
Info Icon - codeswithpankaj
</ body >
</ html >
In this example, an SVG icon is included directly in the HTML, and it is styled using CSS.
4. Styling Icons
Icons can be styled using CSS properties such as color, size, and hover effects.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Styling Icons - codeswithpankaj.com</ title >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >
< style >
.icon {
font-size : 24 px ;
color : blue ;
transition : color 0.3 s ;
}
.icon:hover {
color : red ;
}
</ style >
</ head >
< body >
< i class = "fas fa-thumbs-up icon" ></ i > Like - codeswithpankaj
</ body >
</ html >
In this example, the thumbs-up icon from Font Awesome is styled with a blue color and changes to red when hovered.
This tutorial covers various methods to use and style CSS icons. For more tutorials and examples, visit codeswithpankaj.com .
Last updated 2 months ago