为什么某些FontAwesome图标没有显示?

时间:2020-02-24 12:24:47

标签: css font-awesome

我正在尝试在Java Web应用程序中创建一个社交共享模块。我正在使用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代码。我在做什么错了?

2 个答案:

答案 0 :(得分:1)

您正在使用字体字体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>

答案 1 :(得分:-1)

图标运行正常。

BasicHttpBinding binding = new BasicHttpBinding();
binding.MaxReceivedMessageSize = int.MaxValue;

检查Codepen:https://codepen.io/manaskhandelwal1/pen/YzXNNLw

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

相关问题