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>
Related
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
I place the link in the index head tag and my main css file is being imported
<a href="github.com">
<i class="fab fa-github-square"></i>
</a>
<a href="www.sourcetree.com">
<i class="fab fa-github-square"></i>
</a>
<a href="www.bitbu.com">
<i class="fab fa-github-square"></i>
</a>
Make sure you've also uploaded the /fonts/ directory when using self-hosted Font Awesome. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
after you sure css file is reading correctly , look at the example:
https://fontawesome.com/v4.7.0/icon/address-book
class should be like this:
<i class="fa fa-address-book" aria-hidden="true"></i>
pay attention to "fa" class
I do not understand why my link "back to portfolio" is working on my localhost, and not on my live domain. The only links there is not working, is the back to portfolio button.
Can anybody see why?
My portfolio link
<span class="col-xs-12">
<a href="portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
<span class="col-xs-12">
<a href="Portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
its case sensitive change fine name o Portfolio or vise versa
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 .