46

Why fontawesome icon class is different

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />


<i class="fa fa-edit"></i>
<i class="fas fa-pencil"></i>
<i class="fab fa-facebook"></i>

2
  • 1
    Is there any way to easily copy the tag without having to open the icon? I know you can see the fa-icon name by hovering or with the "cheat sheet"...but is there any way to know whether the icon is fas / fab / far etc. without navigating to the icon page?
    – dcclassics
    Oct 25, 2018 at 19:42
  • 6
    @dcclassics yes there is a way. fab is for brands, so it's easy to recognize all icons. fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.
    – Jakub Muda
    Feb 20, 2019 at 15:01

4 Answers 4

42

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

Please Refer to this

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use enter image description here

16

Chek out Font Awesome DOCS: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

This image has all the informations about prefixes so there is really nothing more to add :)

Font Awesome 5.10.0+ has duotone icons with new prefix fad.

enter image description here

1
0

I will give answer according to your code only.
Font awesome is an amazing easy to use icon library.

  • The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
  • 'fa' alone means font awesome. It is no longer used. But I use it with previous link I have my earlier web creations and it works fine.
  • fas: font awesome solid. It is also free to use.
  • fab: font awesome brands. Free to use

Rest of the styles everyone above is talking about are: regular (far), light (fal) and duotone (fad) are all pro versions. They are paid.

Further information can be found on: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

I hope I have explained with details.

0

FONT AWESOME 6

In Font Awesome 6 you have new styles and new classes:

More details: https://fontawesome.com/docs/web/setup/upgrade/whats-changed#full-style-names

enter image description here

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.