Font awesome content not showing up when defined inside sass

Question

So for whatever reason, I'm unable to make my font awesome content items work inside my .sass files and I've tried every option in the book.

Here is the wp_register_script so that the Font Awesome is called inside WP:

wp_register_script(
    'font-awesome',
    'https://use.fontawesome.com/releases/v5.14.0/js/all.js',
    [],
    '5.14.0',
    true
);

Shows up in the footer as the following:

Then here is where I have my &:after psuedo call:

&:after
  content: "\f105"
  position: absolute
  right: 30px
  transition: all 0.5s
  font-weight: 900
  font-style: normal

This is the result that I'm getting:

All that I'm getting rendered inside the console and on the actual website is just a black box, I want to be able to display the > arrow.

All help would be appreciated!

Answer 1

You need to specifiy the font-family for the :after pseudo-element and also maybe - display: block or display: inline-block to allow it to render ...

And also - since you are setting this to be position: absolute - - you will need to set its parent element to be position: relative to allow the correct positioning....

   .menu-list s span { 
     position: relative; // added this - to allow absolute poisitioning of the icon within the span.
   } 

&:after {
  content: "\f105",
  position: absolute,
  right: 30px,
  transition: all 0.5s,
  font-weight: 900,
  font-style: normal,
  font-family: FontAwesome, // added this line
  display: block, // added this line
  ...
}