Font awesome icons not working

Question

I am trying to add a font awesome icon in front of my Delete & Settings link button but its not working. Can someone please tell me what is missing?

Html Code:

<div class="jumbotron">
    <p>
        <a class="btn btn-danger" href="#">
          <i class="fa fa-trash-o fa-lg"></i> Delete
        </a>
        <a class="btn btn-default btn-sm" href="#">
          <i class="fa fa-cog"></i> Settings
        </a>           
    </p>
  </div>

Added these css:

1) bootstrap.min.css 2) font-awesome.min.css

Also, please see the fiddle here.

Answer 1

This is a bug in 3.2.1 for site URLs, fixed in 4.0.3. Replace the link external link with http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css

(In HTML, it would be <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)

Check this Fiddle

Answer 2

Try with this..

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 
<div class="jumbotron">
    <p>
        <a class="btn btn-danger" href="#">
          <i class="fa fa-trash-o fa-lg"></i> Delete
        </a>
        <br>
        <a class="btn btn-default btn-sm" href="#">
          <i class="fa fa-cog"></i> Settings
        </a>           
    </p>
  </div>

Answer 3

Just use the following link

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

Answer 4

In my case I haven't added the fonts to the project. I found an error in developer console and added below fonts to the location where Font Awesome(font-awesome.min.css) is looking for.

Answer 5

I had same problem as yours and I followed the solution from Wobuffet but it was not working.

I added title ="" to the element and it fixed my issue:

<i class="fa fa-pencil" title="Edit"></i>