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">
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 would like to create an icon for multi file upload using bootstrap-4.
I have referred this below code for single file upload >
but, how to create an icon for multi file upload
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Upload Glyph</h2>
<p>Upload icon: <span class="glyphicon glyphicon-upload"></span></p>
<p>Upload icon as a link:
<a href="#">
<span class="glyphicon glyphicon-upload"></span>
</a>
</p>
<p>Upload icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</p>
<p>Upload icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-upload"></span> Upload
</a>
</p>
<p>Unicode:
<span class="glyphicon"></span>
</p>
</div>
this is the icon, it produced, but how can I make it as multifileupload ?
SINGLE-file-upload-icon
Bootstrap 4 doesn't include an icon font like it did in version 3. This leaves people free to choose whichever icon font they want to use.
From your code it looks like you're using Bootstrap 3 though. All of the available icons are listed in their documentation. Just replace the glyphicon-upload class with the class for the icon you want to use (for instance, glyphicon-open).
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-open"></span> Multi upload
</button>
Alternatively, rather than trying to create a new icon yourself, you can use two and change their positioning to give the appearance of a single icon:
.btn .glyphicon + .glyphicon {
margin-left: -5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-up"></span><span class="glyphicon glyphicon-arrow-up"></span> Multi upload
</button>
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'm using Bootstrap 3 and I have a line of buttons. One of them is a <a> button, or: <a class='btn btn-default' role='button'>Button here</a>; the rest are <button> elements with the same classes.
I was expecting to have them all correctly aligned and spaced, as seen in Bootstrap's examples, however, the result was this:
As you can see, the first button, the one specified as <a> doesn't have the right margin with the next button. What can be causing this?
Here's my HTML:
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
The anchor tags and buttons are correctly spaced because they are inline-block- not sure how there is no spacing between the a and the button you got over there.
Try floating them and then you can remove the space between them if you want to- and set the required margin if needed.
They must be correctly aligned and spaced by default- see below snippet:
a.btn, button.btn {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
See what happens when we float them:
a.btn, button.btn {
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
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 .