Question

我使用“真棒字体”，并且4/5图标显示正确，但最后一个图标（stackoverflow图标，未显示）：

HTML：

<ul>
  <li><a href="#"><i class="xcon-facebook"></i></a></li>
  <li><a href="#"><i class="xcon-twitter"></i></a></li>
  <li><a href="#"><i class="xcon-linkedin"></i></a></li>
  <li><a href="#"><i class="xcon-instagram"></i></a></li>
  <li><a href="#"><i class="xcon-stackoverflow"></i></a></li>
</ul>

CSS：

.xcon-facebook:before { content: '\f09a'; } /* '' */
.xcon-twitter:before { content: '\f099'; } /* '' */ 
.xcon-linkedin:before { content: '\f0e1'; } /* '' */
.xcon-instagram:before { content: '\f16d'; } /* '' */
.xcon-stackoverflow:before { content: '\f16c'; } /* '' */

它们的外观：

here

所以我试图更改这行，就像这样：

.xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Free';} /* '' */

不变。

Answer 1

stack-overflow属于"Brands icons"，因此您需要包括正确的font-family：

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.foo::before {
  /* won't work */
  font-family: "Font Awesome 5 Free"; content: "\f16c";
}

.bar::before {
  /* works */
  font-family: "Font Awesome 5 Brands"; content: "\f16c";
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<nav>
  <ul>
    <li><span class="icon foo"></span></li>
    <li><span class="icon bar"></span></li>
  </ul>
</nav>

Answer 2

使用Brands代替Free

要将它们设置为一行（如图所示），请使用display:flex;

.xcon-facebook:before { content: '\f09a'; font-family: 'Font Awesome 5 Brands'; }
.xcon-twitter:before { content: '\f099'; font-family: 'Font Awesome 5 Brands'; } 
.xcon-linkedin:before { content: '\f0e1';  font-family: 'Font Awesome 5 Brands'; }
.xcon-instagram:before { content: '\f16d'; font-family: 'Font Awesome 5 Brands'; } 
.xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Brands'; } 
ul{
display:flex;
 list-style: none;
}
li{
padding:5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<ul>
  <li><a href="#"><i class="xcon-facebook"></i></a></li>
  <li><a href="#"><i class="xcon-twitter"></i></a></li>
  <li><a href="#"><i class="xcon-linkedin"></i></a></li>
  <li><a href="#"><i class="xcon-instagram"></i></a></li>
  <li><a href="#"><i class="xcon-stackoverflow"></i></a></li>
</ul>

字体真棒4/5图标显示正确

2 个答案: