Font Awesome

Posted on | In

Font Awesome is a popular icon set and toolkit. You can use its icons through a web link.
There are two different web frameworks for using icons on the web:** Web Font & CSS** and SVG & JS. SVG (scalable vector graphics): SVG is a container that defines a new coordinate system and viewport. It is used as the outermost element of any SVG document but it can also be used to embed a SVG fragment inside any SVG or HTML document. I use the SVG framwork. It takes only three steps to start an icon project.
1. Copy the following code into the <head> of each page where you want to use Font Awesome.

1
2
3
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" 
integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" 
crossorigin="anonymous"></script>

2. Placing icon in HTML’s <body>. You can find the right icon here. There are two kinds of basic formats you can use. One is <i> tag and it’s much terser.

1
<i class="fas fa-igloo"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == igloo -->

The other is <span> tag, which is more semantically correct.

1
<span class="fas fa-igloo"></span> <!-- using a <span> element to reference the icon -->

3. Proporties

  • Each icon has three types of styles: SOLID, REGULAR and LIGHT, but LIGHT is not free.

SOLID

1
<span class="fas fa-flag" style="font-size:20px;"></span>

REGULAR

1
<span class="far fa-flag" style="font-size:20px;"></span>
  • Set the size and color.

1
<i class="fa fa-car" style="font-size:40px;color:red;"></i>
  • Make the icon dynamic with fa-spin.

1
<i class="fa fa-cog fa-spin" style="font-size:40px;"></i>
  • Rotate icon with fa-rotate-* or fa-flip-*.

1
<i class="fa fa-male fa-rotate-90" style="font-size:40px;"></i>


1
2
<i class="fa fa-female fa-flip-horizontal" style="font-size:40px;"></i>
<i class="fa fa-female fa-flip-vertical" style="font-size:40px;"></i>

Note: In this page, the other icons of the website may not display correctly, such as calendar and category. This is because I didn’t define them.