How to use font awesome icon using SVG file

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 💚🍁