Font Awesome Icons Tutorial How to use with CSS

Getting Started with Font Awesome Icons

You can use font awesome icons by adding the font awesome css link in your html, font awesom icons is a font based on css developed by Dave Gandy for Twitter Bootstrap.

Font awesome icons cover big share in market and it’s totally free comes in Creative Commons Attribution 4.0, and MIT License.

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet">

This link is directly load the fonts icons from official website. You can also download font awesome icons zip from official website With zip files you can unzip files and place it on project folder

Just like above link you just need to change the path as per your project folder like this

<link href="fontawesome/css/all.css" rel="stylesheet">

your HTML code look like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <!-- Font Awesome Icons -->
    <link href="fontawesome/css/all.css" rel="stylesheet" type="text/css">
  </head>
  <body>

Next Steps

After Installation of fonts files you can use icons directly in your html like this

<i class="far fa-address-book"></i>

In Old Version

<i class="fa fa-address-book"></i>

Conclusion

In fontawesome you will lot of options to apply icons like you can animate,resize icons with use of additional class for more information check it out.

Related Articles

Leave a Reply

Be the First to Comment!

Notify of
avatar