How to add icons on your webpage via HTML?

How to add social media icons in my HTML file?

How to use Font Awesome tool?

You can add icons on your webpage by using Font Awesome tool. You can even customize your Icons with some pre-defined Classes given by Font Awesome. But there are limited numbers of basic Classes pre-defined in it. If you want to go advance, you can use CSS to make it more beautiful.

Not only can you add the social media icons, but you can also add a lot more than that.

There are 5k+ icons present in their database on this current date. You can use the Icons at free of cost or by the lifetime subscription of the pro version, in which you can access all kinds of icons and their variants present. This blog will only cover the free version of this tool.

Now let's see how to use Font Awesome tool.


Step 1 Navigate to the Font Awesome website.

Step 2 Choose the way of including CDN.

Now you have to choose the way how you want to insert the CDN of Font Awesome in your HTML file.

You will get two choices(Webfont/SVG)

To use Webfont, you need to copy the given "link" tag, and for SVG, you need to copy the "script" tag as shown in the images below.

          
              
  Once you have copied one of the above tags, paste it in the head tag of your HTML file.

Step 3 Choose the Icon you want.

To choose the desired Icon, you need to go to the Icons section, which is on top of the page, and then select the free category which is on the left side of the page. Refer to the image below.


You can manually choose your Icon or directly search what you need like social media icons such as Facebook, Whatsapp, Instagram, Twitter, etc.

Step 4 Using the Icons.

To use the Icon which you have chosen you can click on the "Start Using This Icon" button where you will get the 'i' tag with the pre-defined classes of the Icon as shown in the image below which you can copy and paste it to the body tag of your HTML file where ever you want to use it.

       
       

Note: If you don't want to use that 'i' tag, then you have other options also like Unicode for HTML, Unicode glyph, which is used where the glyphs do support and a downloadable image in SVG format.

These options are available under the Icon, as shown in the image below.


Step 5 Customizing Icons.

If you want to customize your icons by pre-defined classes, then you will have few options to style your Icon, and those options are as followed.

Pre-defined classes are available for:-

1. Size: The following Classes are for customizing the size of the fonts.

Example:-

<i class="fab fa-facebook fa-xs"></i>
<i class="fab fa-facebook fa-sm"></i>
<i class="fab fa-facebook fa-lg"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-facebook fa-5x"></i>
<i class="fab fa-facebook fa-7x"></i>
<i class="fab fa-facebook fa-10x"></i>

The pre-defined classes will be respect with the font-size.

Example:-

<div style="font-size: 1rem">
<i class="fab fa-facebook fa-xs"></i>
<i class="fab fa-facebook fa-sm"></i>
<i class="fab fa-facebook fa-lg"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-facebook fa-5x"></i>
<i class="fab fa-facebook fa-7x"></i>
<i class="fab fa-facebook fa-10x"></i>
</div>

By default size of these classes are shown in the image below:-


2. Color: For colors, you have to use CSS to style your icons.

Example:-

<span style="font-size: 3em; color: Tomato;">
  <i class="fab fa-facebook "></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fab fa-facebook "></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fab fa-facebook "></i>
  </span>
</span>

3. Power Transform:- For power transform, refer to this article because I think these documents are not for memorizing.

I will prefer rather than following this documentation for customizing use CSS. It will be simple and easy to customize, and you will have a lot of options to style your icons.

I hope this blog has solved your problem.

Thank You!