CODEWITHSUNDEEP
font-awesome-5
user4279145
user4279145

Reputation:

Why are some Font Awesome icons not showing up?

I'm using the newest version of Font Awesome. When viewing the responsive version of my website, I have a navigation panel. At the top right I need an X (Font Awesome css: f00d). This icon doesn't show up. Other icons, like a folder icon (f07b), do show up. Why is this and what am I doing wrong? An example: beta.degeintrappers.nl

In the head I use: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

As css I have:

#navPanel .close:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 5 Free";
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        #navPanel .close:before {
            content: "\f00d";
            font-size: 1.25rem;
        }

Upvotes: 1

Views: 1328

Answers (1)

Marios Simou
Marios Simou

Reputation: 181

This problem is not well documented by Font Awesome, however, the way to resolve it is by appending the font-family and font-weight property. 

#navPanel .close:before {
            font-family: "Font Awesome 5 Free";
            content: "\f00d";
            font-size: 1.25rem;
            font-weight: 900;
        }

Upvotes: 2

Related Questions