Some Font Awesome icons are not working

Question

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

Writing this code, I am using 2 font awesome icons. My first icon is showing on my output screen but 2nd one is not showing. I have written same code for 2nd. I also try removing the first one, The second still not show. Here is the output atatched.

are you sure you have the second icon in your set .. try using another .one — ScaisEdge, Jul 20 '17 at 10:11

score 5 · Accepted Answer · answered Jul 20 '17 at 10:15

font-awesome v4.0.0 doesn't contain fa-user-plus class. Use 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>

score 2 · Answer 2 · answered Jul 20 '17 at 10:16

As per your question your are using fontawesome 4.0.0 version but fa-user-plus has come in fontawesome 4.3. Check updated snippet below with latest version

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

Some Font Awesome icons are not working

2 Answers2