I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Increase the font-size of glyphicon to increase all icons size.
.glyphicon {
font-size: 50px;
}
To target only one icon,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Fontawesome has a perfect solution to this.
I implemented the same. just on your main .css file add this
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
In your example you just have to do this.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Yes, and basically you can also use inline style:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
try to use heading, no need extra css
<h1 class="glyphicon glyphicon-plus"></h1>
For ex ..
add class:
btn-lg - LARGE
btn-sm - SMALL
btn-xs - Very small
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
Ref link Bootstrap : Glyphicons Bootstrap
I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>
Related
I am trying to do the typical +/- button with Bootstrap but I want to use the Glyphicons instead of a + or - character.
I know that the official documentation says:
Don't mix with other components
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
but I think it should be a way to put a Glyphicons on a button and I cannot get it out.
If not, is there something to achieve the same behaviour?
Here is my code snippet.
Thanks in advance!
Just add the span-container somewhere within your button-container.
Something like this...
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>
Hope this helps :)
When i use :
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
instead of star, its displaying an arrow,
when i use search glyphicon, its displaying a rhombus. Few glyph are not getting displayed.
bootstrap.min.css
bootstrap-theme.min.css
bootstrap-theme.css
bootstrap.css
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
bootstrap.min.js
Can somebody please help?
Thank you
This might help you
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<div class="the-icons">
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
Demo Here
Make Sure to include bootstrap.min.css Link is Here
I have 2 bootstrap ul's and one is beautified and the other one is not, my problem is why the first ul is not rendering correctly is is not beautified , what is wrong ? How you can see in fiddle example in second ul which is the same with first ul nut beautified te spaces are added correctly...
Same html but not beautified
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Same HTML but beautified is render correctly
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item">
<span>/asdasd</span>
<span class="label label-primary">GET</span>
<span class="label label-primary">html</span>
<span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Here is a small js example:
White-spaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element. So give space or enter the span in new line to get expected result
Try like this:
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
</li>
could be due to your code structure. if you structure the top one like the bottom one then it should work
http://i.imgur.com/3v4M7Lw.png
heres a screen shot of what i changed
Continuous html markup like in the first example removes the space between elements.
The second example has spaces in the markup which leads to proper aligned buttons.
Demo JS Fiddle:
I can't implement the href into the buttons.
It will work if I put it this way :
<a href="/">
<button type="button" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</button>
</a>
But this will result in this mess :
Is there any simple way I can fix this? Thanks alot!
Apply the btn class to the a instead.
<a href="/" class="btn btn-default" ...
Also take a look at the docs.
I updated your fiddle for the buttons to work properly:http://jsfiddle.net/ettmujvg/9/
<a href="#" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</a>
I'm using Bootstrap 3 to make a button:
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart" style="font-size: xx-large"></span>
Buy Now<br/>
<span class="small">Instant and secure</span><br/>
</a>
The glyph is, as I intend, large. But I want the two lines of text to both push to the left to make room for the glyph.
What I get currently is this:
What I'm aiming for is this:
How can I do this?
You could use pull-left in the icon, and change the btn to text-align:left:
CSS
.btn-lg {
text-align:left;
width:190px;
}
HTML
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart pull-left" style="font-size:xx-large;margin:5px;"></span>
Buy Now<br>
<small>Instant and secure</small>
</a>
Demo: http://bootply.com/86858