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 :)
Related
I'm trying to make my site more accessible. I'm having trouble how to properly do buttons or anchor buttons. In my example I'll have an anchor but the same problem occur for buttons.
Here's how I did an anchor with a glyphicon. The Title attribute helps the mouse user understand what it does.
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
Is this enough for screen readers? Do I also have to add a the same description as sr-only?
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</a>
Or maybe there's a better way that I haven't thought of.
Use aria-label on the interactive element (using title to display the tooltip is perfectly fine but you should also make it visible for keyboard or touchscreen users).
There's no need to set any special attribute (aria-* or role) on the empty span element.
<a href="#" title="Delete lawn project" aria-label="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</a>
As said by #steveax, you should use a native button element :
<button title="Delete lawn project" aria-label="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
This example would be better as a button since the functionality is a button (an action rather than navigating). If you use an <a> link with a button role, you need to handle all the keyboard interactions that you get for free with a button. Aside from that, what you had looks pretty good. I would make a small adjustment of adding role=img to the icon.
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</button>
Depending upon what browsers/screen readers you need to support, and alternate approach would be to use an aria-label property and omit the extra sr-only content:
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-label="Delete lawn project"></span>
</button>
As always, test.
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 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>