Why Aren't My Font Awesome 5 Icons Showing in CSS Content?

Fixing Font Awesome 5 CSS Content Display

In an attempt to use Font Awesome within CSS content, users may encounter an issue where the expected icon doesn't appear, instead revealing the icon's code. Despite following online guidelines, the issue persists.

To rectify this, it's important to note that only the Font Awesome 5 CSS file needs to be included:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Additionally, the font-family and content property values must be corrected. Specifically:

1. font-family: Replace "FontAwesome" with "Font Awesome 5 Free".
2. content: Use 'f35a' instead of '/f35a'.

Here's an example:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a';
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

<i class="fp-prev"></i>

With these adjustments, Font Awesome symbols will correctly display within CSS content.

The above is the detailed content of Why Aren't My Font Awesome 5 Icons Showing in CSS Content?. For more information, please follow other related articles on the PHP Chinese website!