fontawesome

How to add an Icon to the HTML page?

Spread the love

Today we will learn how to put an icon on an HTML page and use it, or how to add an icon to an HTML page. Here are some steps.
I think you should have an idea of how to add an icon.

Step 1:- Create HTML Structure and add Font Awesome link

Font Awesome can be added in two ways like putting an online CDN link and adding an icon on the HTML page or you can use it by downloading offline Font Awesome.

  • Font Awesome link can be added in two ways
    1. Direct online Font Awesome CDN link add.
    2. Font Awesome Download it then adds an offline link.

Now let’s see how to add a Font Awesome link online

Open this ( https://cdnjs.com/libraries/font-awesome ) page and copy first link all.min.css copy it. and past your HTML page.

copy all.min.css link
Font Awesome link HTML page

Step 2:- Open font Awesome and copy the icon code after the search icon name and paste it into your HTML page.

Search icon name
click any icon
Copy icon Code
Paste here icon code

Output:-

output

How to download Font Awesome and add a link to an offline HTML page?

https://fontawesome.com/ Open this page and click the start for a free button then click on the new page click on the download button and open a new tab then choose your Font Awesome Version: 5.15.3 and click Download Awesome Free Download For web button.

Why the icon is used?

Icons can be used for social media lists and can also be used to make our HTML design more attractive so that the design looks better. I have given an example of an icon below.

<i class="fab fa-facebook-f"> Facebook </i>
<i class="fab fa-youtube"> Youtube</i>
<i class="fab fa-instagram">Instagram</i>
icon output

Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *