In Twitter Bootstrap 3, given this glyphicon span:
<span class="glyphicon glyphicon-home"> Home</span>
the word 'Home' is rendered in standard sans serif instead of the font of the parent tag.
How can I assign an arbitrary font family to the text inside the span, and still render the icon correctly?
Of course I could move the text outside of the span, but then the would not be honored, would it? Regardless, from a semantic standpoint it would seem reasonable to keep the text described by the icon inside the span.
Here's an example:
That's how Chrome renders the following:
<h1>
<span class="glyphicon glyphicon-check"></span> Scoring
<span class="glyphicon glyphicon-home"> Home</span>
</h1>
The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.
Since the icons are inserted using the :before pseudo-element you can make it so that the glyphicon font only applies to that instead of the actual element:
.glyphicon {
font-family: inherit;
}
.glyphicon:before{
font-family:'Glyphicons Halflings';
}
Demo fiddle
Like this
<span class="glyphicon glyphicon-home"> home</span>
Maybe not the most semantic solution, but it is super easy and works.
Wrap the whole darn thing in a span with nowrap.
HTML
<span class="nobr">
<span class="glyphicon glyphicon-check"></span> Scoring
</span>
CSS
.nobr {
white-space: nowrap;
}
Related
Wnen I use buttons on my page the word spacing is too large by default.
.btn {
word-spacing: 1px;
}
is it correct to use negative word spacing? It seems to do the trick.
.btn {
word-spacing: -8px;
}
It's a little bit strange that it has this big spacing by default, but maybe it's just a matter of preference.
Twitter Bootstrap (bootstrap.css||bootstrap.min.css) does not set word-spacing on .btn elements.
Inspect the element and see what stylesheet is adding that rule, because I can assure you it is not the default bootstrap.css (as of v3.3.6). You are either using a modified (non-standard) Twitter Bootstrap version or you are loading a different theme/framework on top of it.
And yes, as long as you load your own stylesheet last or you are using a stronger selector than the one that's currently setting the rule, you can override the word-spacing property on .btns (whithout "breaking" anything else).
You are only changing the space between the letters of your buttons. As a sidenote, I recommend using word-spacing: 0;, which will render the font exactly as it has been designed, with proper kerning and ligatures.
Had the same Problem with glyphicons inside bootstrap buttons. My problem was that I did forget to close the glyphicon span. Afterwards it displayed as normal.
Wrong example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope">
Text with spaces
</button>
Working example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope"></span>
Text with spaces
</button>
I'm using a pattern like this to add icons via :before or :after pseudo content:
<span class="icon icon__example is-content-visually-hidden">assistive text</span>
How can I visually hide the assistive text without hiding .icon pseudo content? Neither the assistive text or the space it occupies should be seen at all, such that these icons can be used inline. When.is-content-visually-hidden is toggled off then the text should be visible. I tried various techniques such as text-indent: -9999px to no avail.
This codepen demonstrates the problem.
The simple approach is to set inner text's font-size to 0 and then reset pseudo-element font to normal again to make it visible:
.is-content-visually-hidden {
font-size: 0;
}
.icon__star::before {
content: "*";
font-size: 32px;
}
Demo: http://codepen.io/anon/pen/zxWQRX
However more flexible approach is to wrap text into one more span:
<i class="icon icon__star is-content-visually-hidden">
<span>star</span>
</i>
and hide span only.
You should wrap the inner text in a span and hide that to be sure. But if you are not able to do that then you could try
font-size: 0
i add icon(Bootstrap Glyphicons) in h1 but icon not in text baseline. how to fix This?!
Problem pic
Code:
<h1 ><a><i class="icon-play"></i>TEST TEXT</a></h1>
For Bootstrap version 3 use this.
<h1>Hi this is heading<span class="glyphicon glyphicon-star"></span> Star</h1>
See this jsfiddle.
your icon size will change according to size of its parent.
Im using Bootstrap v3.2 and I had the same problem.
<h3><span class="glyphicon glyphicon-user"></span> User</h3>
so I changed the display property of the glyphicon from inline-block to inline.
.glyphicon
{position: relative;
top: 1px;
display: inline;
...
}
This is due the An inline element has no line break before or after it, and it tolerates HTML elements next to it but an inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
I would try:
1) changing padding of i.icon-play
2) background-position of i.icon-play
3) vertical-align:center; line-height:12px; of i.icon-play
One of those will work, good luck ;-)
I have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>