I have an html file in which I want to display icons in button.
I am using 3 different images of by Awesome Font i.e
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-user-plus" aria-hidden="true"></i>
<i class="fa fa-user-times" aria-hidden="true"></i>
I have included its library in my project.
Only first image tag i.e <i class="fa fa-user" aria-hidden="true"> is working rest are not displaying the icon. Need Help!
Thanks in advance.
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i>Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i>Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()">Users</button>
</div>
Make sure you are using latest version of Font-Awesome.
Here is the link i used for fiddle and is the latest CDN from bootstrapcdn.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
You missed out <i class="fa fa-user-times" aria-hidden="true"></i> on Users Button.
Check https://jsfiddle.net/luzan/det1ovqa/
you are not using the latest version. Those icons are included in version 4.
Try this one. I think there is <link rel="stylesheet" href="path-to-your-fontawesome-css-file/css/font-awesome.css">
<link rel="stylesheet" href="http://fontawesome.io//assets/font-awesome/css/font-awesome.css">
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i> Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i> Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()"><i class="fa fa-user" aria-hidden="true"></i> Users</button>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!--scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./test.js"></script>
<!-- <button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span> -->
<div class="row justify-content-center test" id="button1">
<h1 class="status">Status of program</h1>
<div class="col-xs-offset-1">
<button type="button" class="btn btn-md" onclick="show(this)">Just an Idea</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">In Development</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Being Polited</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Proof Tested</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Operationals</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div class="row justify-content-center">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr class="test">
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hi
I have written a small html page using bootstrap version 3.3.7 using BootstrapCDN
it just looked fine like this
After I thought to change to version 4.1.0
I just changed the CDN version from 3.3.7 to 4.1.0 from bootstrap official site but it changed whole alignment of my page like this
please help me
Thanks in advance
It's because some bootstrap 3 classes are different in verison 4. You didn't provide any code so it's hard to tell which specificly are causing the problem. You can read in more details about changes here https://getbootstrap.com/docs/4.0/migration/
I am using fontawesome with my buttons but they are not the same size as shown in the pictures. I have tried fa-fw options but that makes things even worse. Any ideas what I can try ?
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm glyphicon fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm glyphicon fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
http://fortawesome.github.io/Font-Awesome/examples/
here's the link..To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
hope this works..
It's because of the glyphicon classes in your HTML. http://jsfiddle.net/q6bpdsmt/1/
Fixed HTML:
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
I have set of buttons aligned fine on desktop but on mobile, when buttons wraps, second row sticks with first set of buttons and starts a little inside.
Please see following fiddle for the problem;
https://jsfiddle.net/u4dq9x38/
HTML:
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
Is there any way to fix this?
Remove the btn-toolbar class, seems like it adds a space before the first element, so not designed to work for wrapping
You may need to add a bottom and right margin to each button individually
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.btn-toolbar>.btn:nth-child(1){
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
I have the following code which displays some buttons:
Fiddle
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A
</li>
<li>B
</li>
</ul>
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.
Any ideas appreciated!
I would put the close ("X") button in its own .button-group and pull the group to the right:
<!-- previous button location -->
</div><!-- close the existing group -->
<div class="button-group pull-right">
<!-- new button location -->
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div><!-- end .btn-toolbar -->
Here's an update to your fiddle.
The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.
Updated HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
Configuration
<span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A</li>
<li>B</li>
</ul>
<button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
Updated CSS:
#b{
width:100%;
}
#right{
float:right;
}
Working Example:http://jsfiddle.net/tmurmvnx/
In bootstrap 4 you can use the strong text class, check this simple example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-lg float-right" role="group">
<button type="submit" class="btn btn-dark">
Btn 1
</button>
<button type="submit" class="btn btn-primary">
Btn 2
</button>
</div>
For more information check this documentation:
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment
I have created a quick & dirty simple website with Bootstrap 3 & Fontawesome . Everything looks good except when on mobile (phone) and the phone is in landscape (rotated). I am seeing a weird right hand clipping (see below) on two of the four Font Awesome Icons. I have tested it on several different browsers / mobile phones, with all the same results.
correct
incorrect - with clipping
<div class="row rowpad">
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/menu/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cutlery fa-stack-1x fa-inverse"></i></span> <h5>Menu</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/bar/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-glass fa-stack-1x fa-inverse"></i></span> <h5>Bar Menu</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/social/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-camera-retro fa-stack-1x fa-inverse"></i></span> <h5>Social</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/where/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-map-marker fa-stack-1x fa-inverse"></i></span> <h5>Directions</h5></a>
</div>
Any suggestions? Anything I am over looking? Thanks.
live website