How to Install Font Awesome 5

Posted on January 11th, 2018, 586 viewed

Before the release of Font Awesome we often use certain icon shaped images to beautify our blog, but this iconic image have a little problem like picture sometimes broke and you can not set the color of the icon.

While Font Awesome you can modify color of icons and enlarge icon size without fear the icon becomes blurred or broken.

See Also :How to Skip Safelinku for Download My Themes
RemIcy V2 WordPress Themes
How To Easily Increase Pageviews in Your WordPress Site

A few days ago I visited the http://fontawesome.io/ site and when I entered the main page I got a pop up notice telling me that Font Awesome has released a new version that is the 5th version, this version was released on December 7, 2017 with 1,278 icons.

As I see in this latest version offers some very exciting and innovative new features like Power Transforms, Marking, Layering, Text, & Counters besides those three features, Font Awesome now has four variants of style that is Solid Regular, Light, and “Brands” that each style produces different icon thicknesses.

Font Awesome installation also not only use css. in this version we can install Font Awesome using Javascript which is provided in Get Started page by using Font Awesome CDN very fast.

Font Awesome can also be used in desktop such as photoshop, illuslator, sketch and other design programs.

What’s an Font Awesome?

Font Awesome is a toolkit icon and font based on CSS and LESS, created by Dave Gandy used for Twitter Bootstrap ( which is now known as Bootstrap ), and then inserted into BootstrapCDN

Font Awesome gives you measurable vector icons that can be instantly adjusted in either icon size, icon colors, blank shadows and anything that can be done with using CSS

What’s New in the latest version?

I explain some of the latest features of this version.

SVG with JavaScript

when your website uses Font Awesome with Javascript then in every icon that uses HTML
(e.g <i class="fas fa-camera-retro"></i>) will be replaced by SVG.

How it Works
Just HTML

<i class="fas fa-coffee"></i>

After using Javascript, then the HTML will become SVG
<svg class="svg-inline--fa fa-coffee fa-w-20" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
   <path fill="currentColor" d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"></path>
</svg>

How to Install Font Awesome in HTML

this tutorial can be installed on the theme wordpress, theme blogger or static static web page, there are two methods I explain that is by using CSS or Javascript (which is highly recommended by font awesome makers to use js).

For WordPress Users, locate the header.php file in your theme
For Blogger User, go to Theme then Edit HTML
For Static Web Page User, entered into the index.html or index.php file

Font Awesome With CSS

1. Find the </head> code in your theme
2. Add the code below just above the </head> code

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

3. Then Save

SVG With Javascript

To use the latest effects of font awesome 5 you need to install these js fonts awesome into your theme. in order for the effect to work. and also your icon attribute will become SVG

but if you just want to use icons instead, just use css without installing js font awesome 5 again.

1. Find the </head> code in your theme
2. Add the code below just above the </head> code

<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>

3. Then Save

List Icon Font Awesome

to see the list icon of font awesome please visit the official website in here https://fontawesome.com/icons?d=gallery

Basic Usage

You can place the font awesome icon anywhere by using CSS or calling the icon name using HTML. font awesome are strongly nested using inline elements ie tags, you can also use tag but people prefer to use tags because the element is very short and practical to use.

Example :

<i class="fas fa-coffee fa-3x"></i>

Result :

Coloring icon
Example :

<i class="fas fa-coffee fa-3x" style="color:#238BE6"></i>

Result :

Styles & Prefixes
after I look around the gallery icon, I conclude not all the available icons are free. you have to buy an license icon to get premium features that can not be obtained on a free user, one of the premium style icon variants is “fa-light” but other styles division there is also a premium icon. for FREE and PRO user comparison you can visit this link. https://fontawesome.com/pro

Style Style Prefix Code Result
Old Version fa <i class="fa fa-flask">
Solid fas <i class="fas fa-flask">
Regular far <i class="far fa-snowflake">
Brands fab <i class="fab fa-facebook">
Light fal <i class="fal fa-flask">
for the prefix fa is no longer used in the font awesome 5 font but the icon still display, when you use the fa prefix will be considered a solid style (fas)

Additional Styling

Icon Size
we can change the icon size we want, we just need to add a class to set the size of the icon.

Example :

<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>

Result :








Class Size
fa-xs 10.5px
fa-sm 12px
fa-lg 19px
fa-2x to fa-10x 28px [2x],42px [3x],70px [5x],98px [7x],140px [10x]

Fixed Width Icons
when we are compiling a content in the form of a list or navigation list without float sometimes icon width is very different which requires that we add the css width itself for the same size.

I just realized this feature has been there when I made this article lol, I often set the manual width when the icon width is not the same size,

we just need to add fa-fw each icon to keep the width the same

Example :

<div><i class="fas fa-home fa-fw" style="background:#d6e8f9"></i> Home</div>
<div><i class="fas fa-archive fa-fw" style="background:#d6e8f9"></i> Archive</div>
<div><i class="fas fa-bookmark fa-fw" style="background:#d6e8f9"></i> Bookmark</div>
<div><i class="fas fa-folder-open fa-fw" style="background:#d6e8f9"></i> Project</div>

Result :

Home
Archive
Bookmark
Project

List Icons
if you want to create a sequential list with icons using the <ul> tags, you simply use the fa-ul and fa-li classes to change the default bullets from the sequential list

Example :

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Result :

  • List icons can
  • be used to
  • replace bullets
  • in lists

Animated Icons
this effect is perfect when we make the loading web or something with rotating effect. just by adding fa-spin or fa-pulse class into the icon class

Example :

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
</div>

Result :





Power Transforms

this is one of the latest features I mentioned before. now you can scale, position, flip, & rotate icons arbitratily using the data-fa-transform element attribute. You can also combine several effects to produce great effects

Scaling
according to the name of the effect. pal can change the scale of the icon without the need to set the position again inside the container. To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals. I will add a background in the example below to see the effect of this scale.

Example :

<div class="fa-4x ">
  <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="grow-6" style="background:#d6e8f9"></i>
</div>

Result :



Positioning
this effect is set the position of the icon. to set the position of the icon up, down, left, right. just add the class up-#, down-#, left-#, and right-# with any arbitrary value, including decimals. I will add a background in the example below to see the effect of this.

Example :

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 up-6" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 right-6" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 down-6" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 left-6" style="background:#d6e8f9"></i>
</div>

Result :





Rotating & Flipping
To rotate or flip icons use any combination of rotate-#, flip-v, and flip-h with any arbitrary value. Units are degrees with negative numbers allowed (see fifth icon in the example). I will add a background in the example below to see the effect of this.

Example :

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="rotate-90" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-180" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-30" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="rotate--30" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="flip-h" style="background:#d6e8f9"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:#d6e8f9"></i>
</div>

Result :








Masking

combining two icons into one form. wow this is very amazing buddy, and you also can add power transform feature for better effect. I will add a background in the example below to see the effect of this.

Example :

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:#d6e8f9"></i>
  <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:#d6e8f9"></i>
  <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:#d6e8f9"></i>
</div>

Result :



Explanation
Inner Icon (cut out) Set using typical class attribute. Transform using any data-fa-transform properties.
Outer Icon Set using data-fa-mask attribute.

Layering, Text, & Counters

I will add a background in the example below to see the effect of this.

Explanation
fa-layers Wraps your stack of icons or text. You’ll likely want to also include an fa-fw class so your layers align.
Inner icons Add as many icons as you like directly inside your fa-layers element. Icons stack with the last icon on the top
fa-layers-text Add inside your fa-layers element to put text on top of an icon. Combine with data-fa-transform for full control.
fa-layers-counter Adds a counter to the top right of your icons. Can be positioned with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right. Overflow text is truncated with an ellipsis.

I am very sorry if my english is very stiff, or not clear.
because i use google translate

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– https://www.petanikode.com/font-awesome/
– https://fontawesome.com/how-to-use/svg-with-js
– https://fontawesome.com/icons

Related Post

Please wait....
Disqus comment box is being loaded