I am trying to vertical-align the text in a button with a font awesome icon. This is the code I tried:
<button class="btn btn-primary"><span style="padding-top: -50px;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;"></i></button>
Fiddle: http://jsfiddle.net/koh8jkyb/
line-height is also not working. What's the problem here?
just use vertical-align:middle with the icon
try this
<button class="btn btn-primary">
<span style="padding: 10px;display: block;float: left;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;float: right;"></i>
</button>
http://jsfiddle.net/koh8jkyb/4/
Try this:
CSS :
.center-content {
display:table-cell;
vertical-align:middle;
}
HTML:
<button class="btn btn-primary">
<span class="center-content">Sign in with</span>
<span class="center-content">
<i class="fa fa-linkedin-square" style="font-size:3em;"></i>
</span>
</button>
Use style="font-size:3em;vertical-align:middle;"
Check out the running code at http://jsfiddle.net/koh8jkyb/
Related
The question is simple, i have a button:
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
From this:
To something like this:
How can i do that?
Thanks!
try this
<button class="btn btn-warning" style="width: 20%; color: white">
<h5><strong>Añadir sucursal</strong> <i class="fa fa-plus-circle"></h5>
</button>
The button text is below the icon because it is in an <h5> tag, and the <h5> is a block element.
If you want to use the styling of <h5> but keep it on the same line, add the d-inline class to the h5 tag, which will change it into an inline element:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<body class="p-4">
<p>Original button with <h5></p>
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
<p class="mt-4">Button with <h5 class="d-inline">:</p>
<button class="btn btn-warning" style="width: 13rem; color: white">
<i class="fa fa-plus-circle">
<h5 class="d-inline">
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
</body>
I would like to place an icon between two buttons. The icon is larger than the buttons and I would like their centers to be on a line. This means that the icon is a bit above and below the buttons.
A simple way to do this is a button group. Unfortunately, the icon is rounded off and buttons in a button group have sharp edges to neighbours in the group and the icon is rescaled to the same size as the buttons:
So I tried to get rid of the button-group. Bootstrap has an align-middle class for vertical alignment. But I can't get this to work. It looks like this:
I browsed and found this: How to center an element horizontally and vertically?
The answer lists a variety of approaches. I would like to stick with bootstrap and avoid custom css as far as possible. But one of the options sounded really good to me: Using justify and align in a flexbox container. Bootstrap containers are flexboxes, so I wrapped my buttons in a container and added align-items: center; justify-content: center;. Same result as the align-middle picture above.
I tried a variety of other css combinations, without any success. The three approaches above seem the cleanest to me, so I presented them here.
A fiddle: https://jsfiddle.net/aq9Laaew/285443/
html (assuming that you have bootstrap and fontawesome):
<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using the bootstrap align-middle class -->
<div class="align-middle">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
Potential duplicates (this is a very common question):
Bootstrap vertical align The answer works on a grid of rows and cols. I prefer not to introduce a grid.
Vertically align elements using CSS No answer has been accepted and the hints are similar to the answer I included in the main text.
Not 100% sure on what you want but if you want to align the buttons, then you can also use bootstrap flexbox and bootstrap text color instead of additional styling: (Edited: align-self-center vs align-items-center)
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-start align-items-center">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
<br/>
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
I've created a simple list and want to push a check icon for completed items and an "add beneficiary" button for uncompleted items to the right. I've achieved that by using margin-left:auto; but think it would look better if they were pushed to the right and then centered among themselves. Is there an easy way for me to do this? Right now my list looks like this:
I would like the button and the check icon to be to the right, but centered among themselves. My html looks like this:
<div class="flex">
<div>
<a class="flex collapsed" ng-class="{'accordion-toggle collapsed':item.beneficiaries.length>0}" ng-if="item.beneficiaries.length>0" data-toggle="collapse" href="#{{item.benefit_type_sysID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
<span class="h4" >{{item.benefit_type_name}}</span>
</a>
<h1 class="h4 flex collapsed" ng-if="item.beneficiaries.length==0">
{{item.benefit_type_name}}
</h1>
</div>
<div style="margin-left:auto;">
<button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
<i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>
<i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
</div>
</div>
Is there an efficient way to style this? Thanks!
This is what you need to do to make it center. You need to add a specific width to the div. Try this.
<div class="action">
<button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
<i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>
<i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
</div>
CSS,
.action {
margin-left: auto;
width: 140px;
text-align: center;
}
I'm stuck working with this code on my company's site. I can't seem to figure out how to float the buttons with the code given.
<div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
Current view. Links to imgur.
Any help would be greatly appreciated. Thanks so much
You can use float left or right for horizontal align and for centralize use margin and as in bootstrap use pull-left or `pull-right class for the same.
like:
<div class="text-center pull-left"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;" class="pull-left"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
try this
<div class="center">
<button id="btn1">Button1</button>
<button id="btn2">Button2</button>
</div>
css
#btn1, #btn2
{
width:20%;
float:left;
}
I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</div>