Why Isn't My Font Awesome 5 Icon Showing?

Why is Font Awesome 5 CSS Content Not Showing?

When attempting to utilize Font Awesome CSS content, users may encounter an issue where only the icon code appears instead of the desired icon. This can be resolved by addressing both the font-family and content attributes.

Font-family Correction

In the provided code snippet, the font-family attribute is incorrectly set as 'FontAwesome'. The correct font-family for Font Awesome 5 Free is:

font-family: "Font Awesome 5 Free";

Content Correction

The content attribute is missing a leading backslash ''. Instead of /f35a, it should be:

content: '\f35a';

Here is the updated code with the corrections applied:

@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;
}

By making these corrections, the Font Awesome icon should now display properly.

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