How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x).
This code will make my glyphicons big:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
How can I get this size without using the btn-lg class while using only a span ?
This gives a small glyphicon:
<span class="glyphicon glyphicon-link"></span>
You can just give the glyphicon a font-size to your liking:
span.glyphicon-link {
font-size: 1.2em;
}
Here's how I do it:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
This allows you to change size on the fly. Works best for ad hoc requirements to change the size, rather than changing the css and having it apply to all.
The .btn-lg class has the following CSS in Bootstrap 3 (link):
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
If you apply the same font-size and line-height to your span (either .glyphicon-link or a newly created .glyphicons-lg if you're going to use this effect in more than one instance), you'll get a Glyphicon the same size as the large button.
<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>
<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>
In my case, I had an input-group-btn with a button, and this button was a little bigger than its container. So I just gave font-size:95% for my glyphicon and it was solved.
<div class="input-group">
<input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
<div class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
</button>
</div>
</div>
Write your <span> in <h1> or <h2>:
<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
If you are using bootstrap 3, use tag, like this <small><span class="glyphicon glyphicon-send"></span></small> It works perfect for Bootstrap 3.
You can even use multiple <small> tags to set the size more smaller.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>
Related
The buttons displayed in this fiddle are not properly displayed: Since the text is in Hebrew, the first button (with id="first") should be the most right one, but is currently the most left one.
Playing with the style, it seems that this is caused by the display attribute of btn-group class (whose value is inline-block), and when I change it to display: flex the buttons are displayed in the correct order, but the first and last child's borders (right and left borders) get flipped.
I was trying some advice found in this question, but didn't manage to make it work.
Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
bootstrap floats your elements, you need also to overwrite float direction:
div[dir="rtl"] .btn-group .btn
{
float:right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
you can also use the class .pull-right.
HeyJude wrote: the borders get flipped. If you look closely, you'll notice that the left border (the one with the rounded corners) of the first child should be the right one, and vice versa for the last child.
for the rounded corners, a trick could be to use transform instead rewritting CSS. It requires to encapsulate text within the span too. Icone is generated via a pseudo and should not mess it up.
div[dir="rtl"] .btn:first-of-type,
div[dir="rtl"] .btn:last-of-type,
div[dir="rtl"] .btn:first-of-type span,
div[dir="rtl"] .btn:last-of-type span {
transform: scale(-1, 1);
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-hdd"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-plus-sign"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-minus-sign"> שלוש</span>
</button>
</div>
</div>
I gave it some more trials, and eventually got it with the trick of rotating the btn-group and then rotating back the text (keeping each cell's content in its own span element):
.rotate
{
transform: rotateY(180deg);
}
.rotate-back
{
transform: rotateY(180deg);
display: inline-block;
direction: rtl;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group pull-right rotate" role="group">
<button id="first" type="button" class="btn btn-default ">
<span class="glyphicon glyphicon-hdd"></span><span class="rotate-back"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back"> שלוש</span>
</button>
</div>
So here's the code:
<button class="btn btn-default btn-test" style="width:200px; white-space:normal;" id="up-arrow-div" >
<div class="col-xs-2 arrow-up-div" style="font-size:30 !important">
<span class="glyphicon glyphicon-collapse-up arrow-up" style="font-size:30 !important"></span>
</div>
<div class="col-xs-10">
Contribute more to support Last Minute Gear!
</div>
</button>
I've tried in 2 different places to make the glyphicon size bigger but to no avail. Output still looks like this:
Any thoughts?
change this:
<span class="glyphicon glyphicon-collapse-up arrow-up" style="font-size:30 !important"></span>
to this:
<span class="glyphicon glyphicon-collapse-up arrow-up" style="font-size:40px; !important"></span>
It appears you forgot to define a measurement type so I added px for you.
Let me know if that works
You are using style="font-size:30 !important"
You should use instead style="font-size:30px!important"
In Chrome/Safari my icon within a bootstrap button looks fine:
But in Firefox, the icon drops down a line:
I have the fontawesome icon floated right within the <button>.
<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
</div>
</div>
<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon, i.fa {
color: rgb(90, 90, 90);
top: 1px;
}
How can I make the Firefox version one-line like the Chrome?
JSBIN
Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
Instead of
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
What is the proper markup for using a button with only a glyphicon in it in Twitter Bootstrap 3.0? If I use the following
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
I get something like this:
Update:
I did a diff between the styles on mine and #Adrift's <button> element and got the following:
# -- is mine
--webkit-perspective-origin: 12px 8px;
+-webkit-perspective-origin: 12px 11px;
--webkit-transform-origin: 12px 8px;
+-webkit-transform-origin: 12px 11px;
-height: 16px;
+height: 22px;
-text-rendering: auto;
+text-rendering: optimizelegibility;
Try adding a non-breaking space after the icon span.
Like this:
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Seems like a little late but the correct answer is:
<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>
You have to add both glyphicon and glyphicon-{type} in the span class, a not a element. Good Luck
Hi I had the same problem.
I found out that <!DOCTYPE html> was missing in index.html.
After I added this the button had right away the right size.
Hope this helps ;)
Or you could just use the glyphicon itself as a button
<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>
and then set an "onclick" method for it...
$("#TrashButton").on("click", function () {
//do something
});
(prior to version 3.0)
Shouldn't it be ...
<button type="button" class="btn btn-small btn-danger">
<i class=" icon-trash"></i>
</button>
Simply use
<span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
http://bootply.com/74652
Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
Demo
This works in Bootstrap 4 with Font Awesome icons like so
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
Try vertical-align: middle; on .glyphicon-th:before
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
<div class="vcenter">
<button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>
See http://www.bootply.com/UbY78zM8pD for live example.
I managed to do it like this:
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
I managed to get mine working as follows:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
Other way
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
CSS:
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>