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.
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.
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.
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.
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.
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
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>
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With