一些字体真棒图标不起作用

时间:2017-07-20 10:07:57

标签: html font-awesome font-awesome-4

<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个字体真棒图标。我的第一个图标显示在输出屏幕上,但第二个图标未显示。我为第二个写了相同的代码。我也尝试删除第一个,第二个仍然没有显示。 这是输出的结果。

output screen

2 个答案:

答案 0 :(得分:5)

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>

答案 1 :(得分:2)

根据您的问题,您使用的是fontawesome 4.0.0版本,但fa-user-plus已进入fontawesome 4.3。使用最新版本

检查下面的更新代码段

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