Why is My Font Awesome 5 Icon Displaying as a Square, and How Do I Fix It?

Pseudo-Element Icon Display Issue with Font Awesome 5

When attempting to change the content of a span with a Font Awesome icon directly via CSS, you may encounter an issue where the icon is displayed as a square instead. This problem arises due to the use of the new 'JS SVG' version of Font Awesome 5.

To resolve this issue, you must add font-weight: 900 to your CSS. This will change your CSS to the following:

.myClass {
  font-size:45px;
}

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

You may also need to update the URL to the Font Awesome CSS file to ensure you are using the latest version.

Note: This solution only applies to the 'JS SVG' version of Font Awesome 5. If you are using the 'CSS' version, you should not encounter this issue.

The above is the detailed content of Why is My Font Awesome 5 Icon Displaying as a Square, and How Do I Fix It?. For more information, please follow other related articles on the PHP Chinese website!