Font Awesome 5 不显示所有 unicode

Question

我试图在 css 中为 FA5 使用 unicode，但它并不总是有效。如果我使用 html 标记，图标会起作用。

下面的代码，还有一个fiddle。您将看到第一个作品，使用对齐图标，但第二个可访问图标不起作用。

  <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>

Answer 1

当使用fab时，意味着font-family需要是Font Awesome 5 Brands。您可能还需要更正 font-weight 以获得正确的图标

.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>

Font Awesome 5 不显示所有 unicode

Font Awesome 5 not displaying all unicodes

css

pseudo-element

font-awesome

font-awesome-5