Font Awesome 5 on pseudo elements shows square instead of icon

by

If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version

You need to add

font-weight:900

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class="myClass"></span>

The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:

https://fontawesome.com/icons/film?style=solid

CSS fontawesome 5 pseud element font weight

Why the other icon is working?

Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don’t need to specify a font-weight. You only need to specify it when you want to show the solid version.

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="myClass">Solid </span>
<br>
<span class="myClass-1">Regular </span>

As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used

You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Font Awesome 5 - pseudo element

Related questions

Font Awesome 5 shows empty square when using the JS+SVG version

Font Awesome 5 unicode

Font Awesome 5, why is css content not showing?

More Related Contents:

  1. I can’t get my font-awesome icons to show up. Tried importing css with multiple methods
  2. Can I use a :before or :after pseudo-element on an input field?
  3. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  4. Html/Css Triangle with pseudo elements
  5. Li item on two lines. Second line has no margin
  6. :after and :before CSS pseudo elements hack for Internet Explorer 7
  7. How to center text vertically with a large font-awesome icon?
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. Font Awesome 5, why is CSS content not showing?
  10. Elongated hexagon shaped button using only one element
  11. Using CSS :before and :after pseudo-elements with inline CSS?
  12. Use Font Awesome icon as CSS content
  13. Font Awesome icon inside text input element
  14. Why does a filter gradient on a pseudo element not work in IE8?
  15. How do I add a Font Awesome icon to input field?
  16. Font Awesome icons are not working, I have included all required files [closed]
  17. Font awesome is not showing icon
  18. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  19. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  20. Can a ::before selector be used with a ?
  21. CSS data attribute new line character & pseudo-element content value
  22. Which elements support the ::before and ::after pseudo-elements?
  23. Can I change the color of Font Awesome’s cog icon?
  24. How to vertically align text with icon font?
  25. Font Awesome & Unicode
  26. Using attr(data-icon) property to display unicode before element
  27. after pseudo element not appearing in code
  28. pseudo-element acting like a grid item in CSS grid
  29. Adding text before list
  30. Changing image on hover with CSS/HTML

Leave a Comment