Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font awesome icons not working

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.

like image 557
user972255 Avatar asked Jan 08 '14 01:01

user972255


People also ask

Why are my Font Awesome icons not showing up?

Here are a few ways you can fix these font awesome icons not showing up: Font Awesome 5 uses slightly different class names for their icons. In version 4, you’d use something like . In the newest version, you use something like . They’re similar, and it can be easy to get tripped up on this at first.

How to add Font Awesome icons to your website?

Open the font awesome CSS file in the <head> section of HTML code. On the top of the CSS file you should see the Font Awesome version as in the screenshot below: Now that you know which version your website is using, you can go ahead and use only those icons that are supported by your Font Awesome version.

How do I know what version of Font Awesome my website uses?

On the top of the CSS file you should see the Font Awesome version as in the screenshot below: Now that you know which version your website is using, you can go ahead and use only those icons that are supported by your Font Awesome version. Below are the links to libraries of all the Font Awesome icons for each version from v3 to 6.

What is the difference between Font Awesome version 5 and 6?

Font Awesome version 5 has a total of 7,864 icons where only 1,608 icons are free and the rest are premium. Version 6 (which is at the beta stage at the time of writing this article) has a total of 14,554 icons, where only 1,704 are free and the rest are premium. Premium, also referred to as PRO is paid for.


3 Answers

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

like image 136
Cilan Avatar answered Nov 15 '22 10:11

Cilan


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>
like image 32
Mr. HK Avatar answered Nov 15 '22 11:11

Mr. HK


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" />
like image 33
Hashibul Hasan Avatar answered Nov 15 '22 11:11

Hashibul Hasan