Skip to main content

How to use icon in pseudo CSS element using Font Awesome Pro

Implement FontAwesome Pro in CSS using Pseudo elements, it comes in handy when creating drop down menus, etc.

 

Change the font weight based on the library you are using.
Eg if you are using Font Awesome Light, use weight of 300.

   &:before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            content: "\f107";
            display: block;
            top: 3px;
            right: 0;
            position: absolute;
          }
   &:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            content: "\f107";
            display: block;
            top: 3px;
            right: 0;
            position: absolute;
          }
Solid Free Plan 900 Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)
Regular Pro Plan Required 400 Font Awesome 5 Pro
Light Pro Plan Required 300 Font Awesome 5 Pro
Duotone Pro Plan Required 900 Font Awesome 5 Duotone
Brands Free Plan 400 Font Awesome 5 Brands

Leave a Reply