一些 Font Awesome 图标不起作用答案

【问题标题】：Some Font Awesome icons are not working一些 Font Awesome 图标不起作用
【发布时间】：2017-12-25 23:16:48
【问题描述】：

<div class="col-md-12">
     <div style="margin-top: 5px">
          <label>
             <a href="#"><i class="fa fa-comments" aria-hidden="true"></i> 
                Chat with @Model.MemberFirstName</a>
          </label>
          <label>
             <a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> 
                Send Friend Request</a>
          </label>
     </div>
</div>

编写此代码时，我使用了 2 个 font awesome 图标。我的第一个图标显示在我的输出屏幕上，但第二个没有显示。我为第二个编写了相同的代码。我也尝试删除第一个，第二个仍然没有显示。这是附加的输出。

【问题讨论】：

你确定你的集合中有第二个图标吗.. 尝试使用另一个 .one

标签： html font-awesome font-awesome-4

【解决方案1】：

font-awesome v4.0.0 不包含fa-user-plus 类。使用 font-awesome v4.7.0

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
     <div style="margin-top: 5px">
          <label>
             <a href="#"><i class="fa fa-comments" aria-hidden="true"></i> 
                Chat with @Model.MemberFirstName</a>
          </label>
          <label>
             <a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> 
                Send Friend Request</a>
          </label>
     </div>
</div>

【讨论】：

【解决方案2】：

根据您的问题，您使用的是fontawesome 4.0.0 版本，但fa-user-plus 已进入fontawesome 4.3。用最新版本检查下面更新的 sn-p

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="col-md-12">
     <div style="margin-top: 5px">
          <label>
             <a href="#"><i class="fa fa-comments" aria-hidden="true"></i> 
                Chat with @Model.MemberFirstName</a>
          </label>
          <label>
             <a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> 
                Send Friend Request</a>
          </label>
     </div>
</div>

【讨论】：