Font Awesome 5 not displaying all unicodes

Question

I am trying to use unicodes in css for FA5, but it is not always working. The icons work if I use the html markup.

Code below, and also a fiddle. You will see the first works, using a justify icon, but the second accessible icon does not work.

https://jsfiddle.net/s6qkcnyb/

  <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            .justify::after {font-family: "Font Awesome 5 Free"; content: "\f039"; white-space:pre; font-weight: 900; }
            .accessible::after {font-family: "Font Awesome 5 Free"; content: "\f368"; white-space:pre; font-weight: 900; }            
        </style>
        
    </head>
    <body>
        <div>This is using html : <i class="fas fa-align-justify"></i></div>        
        <div class='justify'>This is using css : </div>
        
        <hr>

        <div>This is using html : <i class="fab fa-accessible-icon"></i></div>        
        <div class='accessible'>This is using css : </div>

        
    </body>
    </html>

Temani Afif · Accepted Answer · 2020-01-22T14:54:50.767

When using fab it means that the font-family need to be Font Awesome 5 Brands. You may also need to correct the font-weight to get the correct icon

.justify::after {
  font-family: "Font Awesome 5 Free";
  content: "\f039";
  white-space: pre;
  font-weight: 900;
}

.accessible::after {
  font-family: "Font Awesome 5 Brands";
  content: "\f368";
  white-space: pre;
  font-weight: 400;
}

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

<div>This is using html : <i class="fas fa-align-justify"></i></div>
<div class='justify'>This is using css : </div>

<hr>

<div>This is using html : <i class="fab fa-accessible-icon"></i></div>
<div class='accessible'>This is using css : </div>

Related: Font Awesome 5 - Choosing the correct font-family in CSS pseudo-elements

Font Awesome 5 not displaying all unicodes

1 Answers1