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.