CSS Icons

Icons are a great way to enhance the visual appeal of your website and improve user experience. In CSS, you can use icons from various sources like icon fonts (e.g., Font Awesome) and SVGs.

Using Font Icons

Font icons are a popular method for adding icons to your website. Services like Font Awesome provide a wide range of icons that can be easily integrated using CSS classes.

1. Font Awesome

Font Awesome is a widely used library of icons that can be included in your project via CDN or by installing it locally. Here’s how to use it with Tailwind CSS.

/* Include Font Awesome CDN in the  of your HTML */


/* Use icons with CSS classes */
.icon {
    font-size: 2rem; /* Adjust icon size */
    color: #333; /* Icon color */
}

        

Using SVG Icons

SVG icons offer more flexibility and scalability compared to font icons. They can be styled directly with CSS and are ideal for responsive design.

2. Inline SVG

You can include SVG code directly in your HTML to take advantage of its styling capabilities.

/* Inline SVG with Tailwind CSS */
.svg-icon {
    width: 2rem; /* Adjust icon size */
    height: 2rem;
    fill: #333; /* Icon color */
}

        

/* External SVG as img */
.icon-img {
    width: 2rem; /* Adjust icon size */
    height: 2rem;
}

/* External SVG as background image */
.icon-bg {
    width: 2rem;
    height: 2rem;
    background-image: url('icon.svg');
    background-size: cover;
}