为什么有些 FontAwesome 图标没有显示？

Question

我正在尝试在我的 Java 网络应用程序中创建社交共享模块。我正在使用 w3schools 中的这个示例。我在项目中已经有了 fontawesome 图标，但出于某种原因，在添加以下代码后，只有其中一个（社交图标或站点中的旧图标）在工作。他们在使用 fontawesome css.

的各种 cdn 链接切换时显示方形图标或没有图标

     <link
 rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
 crossorigin="anonymous">
    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- The social media icon bar -->
    <div class="icon-bar">
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="#" class="google"><i class="fa fa-google"></i></a>
      <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
      <i class='fa fa-brain'></i>          
      <i class='fa fa-calculator'></i>          
    </div>

虽然我没有添加示例中的 css 代码。我做错了什么？

Answer 1

图标工作正常。

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">

<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>

检查代码笔：https://codepen.io/manaskhandelwal1/pen/YzXNNLw

您的代码中还有其他一些可变性。

Answer 2

您正在使用 fontawesome 5 中的几个图标。例如 fa-brain。您需要相应地更新 css link 和字体类。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">

<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
  <a href="#" class="google"><i class="fab fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
  <a href="#" class="calculator"><i class="fas fa-calculator"></i></a>
  <a href="#" class="brain"><i class="fas fa-brain"></i></a>
</div>

为什么有些 FontAwesome 图标没有显示？

Why some of the FontAwesome icons are not showing?

css

font-awesome