How to use font awesome icon using SVG file

#beginners #fontawesome #css #html

Hi, Everyone!!

Today we will know how to use Font Awesome icons without using the Font Awesome kit link.

See Here (final output) 👇🏻

First Choose any icon from the font awesome. Then download the SVG file of the icon.
Then add the SVG file to the HTML file like this.

HTML Part:

<p>
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-half-stroke-solid.svg" alt="">
        <img class="icon" src="images/icons/star-regular.svg" alt="">
    </p>

CSS Part:

.icon{
    width: 50px;
}

Here I added three SVG files solid, half-solid, regular (5 image) for the 3.5 star rating.

On the live website, this will show ✅

Color Providing:

We can not set a color using the CSS. For setting a color we have to edit on the SVG file code. Here you can provide any color in the fill section. 'fill' is used for color in the SVG image.

Now put any color in the fill="rgb(84, 246, 255)". Then the color will change.

Boom!!!!! 💥💥💥

Thanks for reading 💚🍁

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.