css - 为什么有些 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

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

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