I'm creating bootstrap buttons with a fontawesome icons.
The 2 icons are:
fas fa-user
fas fa-users
which render ok. However, as soon as I add the bootstrap button css, the fa-users button shows up as a square and not the icon. Not sure why or how to fix this? Any help greatly appreciated. Thanks.
<div>
<em class="fas fa-user"></em>
<em class="fas fa-user btn btn-sm btn-purple"></em>
</div>
<div>
<em class="fas fa-users"></em>
<em class="fas fa-users btn btn-sm btn-purple"></em>
</div>
btn apply a font-weight that you need to override and put it back to the one defined inside fas
.fas.btn {
font-weight:900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<div>
<em class="fas fa-user"></em>
<em class="fas fa-user btn btn-sm btn-success"></em>
</div>
<div>
<em class="fas fa-users"></em>
<em class="fas fa-users btn btn-sm btn-success"></em>
</div>
Related: Font Awesome 5 on pseudo elements shows square instead of icon
Related
I tried to add FontAwesome icon "fa-plus", but it is not showing.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class="table-add float-right mb-3 mr-2"><i
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
You're making a mistake there. You need to remove the extra anchor closing tag for it to work. Good luck.
Your HTMLhave errors: (two "< /a>")
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
</a>
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
</a>
</span>
Replace with this:
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
To add font awesome + icon, use "fa fa-plus"
For Example :
class="fa fa-plus"
I'm creating a card in bootstrap with some social media icons (Font-awesome). For some reason all my icons are treated as boxes and have a black outline around them. My hover shadows also wrap around the square rather than the icon itself.
Why does this happen and how can I fix it?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 text-center">
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
<i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
<i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
<i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
</div>
The box border is being generated by they type="button" parameter in your anchors, which has a defined -webkit-appearance: button; in bootstrap's stylesheet. So remove that type="button" parameter, or style it as desired.
As for the shadows, if you want them to keep the shape of the icon instead of being boxed, you should either use text-shadow or filter: drop-shadow instead of box-shadow
I have an MVC project with Bootsrap 4 (SASS) and Font Awesome 5. I'm trying to get an spinning icon to work for use with an Ajax loading panel but it's not working.
<a href="#" class="btn btn-danger">
<i class="fas fa-spinner fa-pulse"></i> Test Spin
</a>
<a href="#" class="btn btn-danger">
<i class="fas fa-home fa-fw"></i> Test icon
</a>
I have the following buttons for testing. The one with just the icon in the button displays the FA icon but the button with the FAS spinning icon doesn't display.
For FontAwesome all I have is the "~/Scripts/fontawesome-all.min.js" file referenced. From my understanding that's all I needed to do?
This is my bundle:
bundles.Add(new ScriptBundle("~/bundles/vendorscripts").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/respond.min.js",
"~/Scripts/fontawesome-all.min.js"));
This is my layout page:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/vendorscripts")
#RenderSection("scripts", required: false)
You need to use fa-spin class also to make it spin.
<a href="#" class="btn btn-danger">
<i class="fas fa-spinner fa-spin"></i> Test Spin
</a>
I have added a a button and Styled it using Bootstrap but the icon(Font) of the button is not as per the styling.I am not able to figure out what is missing in the Markup..Here is the HTML..
<button class="btn-u btn-u-xs btn-brd btn-brd-hover" type="button" title="Add New" data-toggle="modal" data-target="#responsive" onclick="">
<i class="fa fa-plus"></i>
<span class="hidden-xs hidden-sm">Add New</span>
</button>
Please help me to resolve this .Thanks
Bootstrap doesn't include the fa fa icons. put this in your head and you're good to go
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
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.
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" />
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.
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>
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"
This link is really worked for me .