How To Use Font Awesome Icons In HTML

The Font Awesome icon toolkit is a great way to show icons in your HTML page. Adding icons to suitable places makes the content more meaningful and makes it look attractive. Design of a website is very important for a better user retentivity. This is just another way to increase the visual delight of your website.

What is Font Awesome?

Font Awesome is a freemium icon toolkit service which hosts 675 scalable vector graphics. We can manipulate the graphics in size, color and almost anything that we can do with any font with CSS. We can call it as an icon font – as it behaves just like a font, but here instead of text, it has icons.

Implementing the Font Awesome Toolkit

The Font Awesome icon toolkit can be implemented in your website by adding a single line of code within the <head> tag. This line imports a style-sheet which enables us to use the Font Awesome icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Example which shows the use of this icon toolkit:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Example</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
   <i class="fa fa-smile-o"></i>
   <i class="fa fa-smile-o" style="font-size:50px;"></i>
   <i class="fa fa-smile-o" style="font-size:60px; color:red;"></i>
  </body>
</html>

 Example showing the use of larger icons:

<!Doctype html>
<html>
  <head>
    <title>Font Awesome Example</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <i class="fa fa-smile-o fa-2x"></i>
    <i class="fa fa-smile-o fa-3x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
  </body>
</html>

Also, read:

I hope you have understood how to load Font Awesome and use those icons on your web page in the specific place. Now you can also add those cool font awesome icons on your web page for better user experience.




 


Leave a Reply

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