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
Related
I was wondering, say I have a button like so:
<button><i class="font-icon-class"></i></button>
would it be possible for me to add padding (or any other style) to the .font-icon-class should the button also contain text or another HTML tag? So if my button was like so:
<button><i class="font-icon-class"></i> Button Text </button>
or
<button><i class="font-icon-class"></i> <img src="..."></button>
I thought I could apply a padding-right using a CSS selector, something like
.font-icon-class + * {
padding-right: 5px;
}
Obviously that doesn't work and I know I could use JavaScript but I was wondering if CSS could provide a solution?
Many thanks in advance.
You can try the :only-child selector
.font-icon-class:only-child {
padding-right: 0px;
}
.font-icon-class {
width: 15px;
background: lime;
padding-right: 15px;
}
button {
width: 150px
}
<button><i class="font-icon-class">test</i></button>
<button><i class="font-icon-class">test</i><span>HELLO</span></button>
CSS is short for Cascading Style Sheets, which means it adds the style as it goes down the code - not up. Therefore you can't (Yet? I believe I read somewhere you will be able to, in the future) add style to an element, if it has another element after.
A solution - if you have access to the HTML, would be to add a span around the element after the .font-icon-class, like so:
<button>
<i class="font-icon-class"></i>
</button>
<button>
<i class="font-icon-class"></i>
<span>Button Text</span>
</button>
<button>
<i class="font-icon-class"></i>
<span><img src="..."></span>
</button>
And then your own CSS would work, but you could narrow it down so you don't target all elements after the .font-icon-class, change the padding to left, and display the span as inline-block:
.font-icon-class + span {
display: inline-block;
padding-left: 5px;
}
This would add a padding to the span-element inside the button, if it is after the .font-icon-class-element
should the button also contain text or another HTML tag?
there is no need of any HTML tag or text if you don't want.
and from your question what I understood is, You can directly style the class like this,
and If want to add padding or any style just to next element in button, then you can do this,.
.font-icon-class + *{ any Style of your choice }
.font-icon-class {
padding-right: 15px;
}
<button><i class="font-icon-class"></i></button>
I have a div that says "Tags: Example 1, Example 2"
The css looks like this:
.tag {
color: #bbb9b9;
font-size: 8pt;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.tag:before {
content: 'Tags: ';
}
.tag:empty {
display:none;
}
Now, if no tags show up at the Wordpress post, I also want to hide the text "Tags", but it is in a :before tag.
Is there a way to hide the :before element somehow? Since the :before element is never actually empty, I'm finding it hard to fix.
The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
It will only work if the div is completely empty or has comments.
<div></div>
<div><!-- Comment --></div>
If the div has space or tabulations, you will have to use the pseudo element :blank
<div> </div>
<!-- Notice that inside this div there is a blank space -->
<div>
<!-- Comment-->
</div>
I think maybe this is what might happen. Although there is no content, the div may have some space or tabulation. If this doesn't help, it would be nice to have an example of the html code when it's theoretically empty.
I using Google Chrome Inspector and if you select the before pseudo of the glyphicon you will see that there is empty space at the right. How I can center the glyphicon?
I tried to set text align but it doesn't work.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
jsFiddle
Updated link jsFiddle 2
I gave letter spacing for pseudo element and it did the trick. I tried changing the font-size and I see that white space is not appearing.
.glyphicon:before{
letter-spacing: -0.085em;
}
Working fiddle: http://jsfiddle.net/MasoomS/1z79r22y/
I believe the root problem here is with the SVGs that the icon font was built from. I've built icon fonts before from SVGs and saw this exact same behavior. If the symbol wasn't centered within its SVG viewbox, you'd get a glyph that was off-center like you've observed.
Developing a code-based solution would get super messy, because you'd have to individually account for each glyph that isn't centered, and then your offsets would have to be relative to the size of the icon so the offsets scale with the font-size of the icon. It's certainly do-able, but it seems like the sort of thing that would be a headache to maintain.
I would recommend one of the following:
Accept the glyphicon set for what it is (a free icon font) and live with its imperfections
Look for another icon font that doesn't have this same issue--be willing to pay for a license
Create your own icon font so you can ensure that all glyphs are centered
Almis Hi there. Your demo code is only using just the span holding the glyphicon it has no Width to center within.
As soon as you do something like this it will center.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Here is a Fiddle.
Just add the class my-style-icon to the icon and add this to your CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
vertical-align: middle; margin: 0 auto; should do the trick for you.
Hello Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Just replace the .glyphicon class with above css code.
Enjoy..
As you can see its clearly a problem by the author adding some white space, the only why to fix this is by setting the width manually.
You can get rid of the empty space on the right of the glyph by playing with the letter-spacing attribute:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
I normally use max-width (and width, if I want all icons in a list to have the same size) to deal with such issues.
As per your jsFiddle:
max-width:222px;
See here.
The reason this can't be fixed in any other way other than a hack is because the glyphicon itself isn't centered inside it's own container, meaning when it was designed in it's matrix it wasn't fully centered.
You will have to 'hack' it with shivs stated above (letter spacing, negative margin, etc) but it's resolution dependent.
However to VERTICALLY center it you can remove the padding, and use line-height equal to your container's height
Use font-awesome, it's '+' is perfectly centered, with no kerning problems. And use display:flex on parent, in combination with margin:auto on child (i.e. icon). It results in a perfectly alignment.
Here is the jsfiddle(http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
The problem we're trying to solve is that text is overflowing past the end of a <p>. It seems to be the result of its contents, which include a relatively-positions <a> element, with an absolute-positioned <span> element within it, which has padding. Firefox wraps the text as I would normally expect.
Here's an abstraction of my HTML:
<p>
In this second example,
<a href="#">
<span class="icon"><img src="play.gif"></span>
mo
</a>
muh...
</p>
And an abstraction of the CSS, as simplified as I think still makes sense:
a {
padding: 5px;
}
a span.icon {
position: absolute;
display: block;
width: 15px;
height: 15px;
}
Here's a screenshot of the problem (the highlighting is Chrome's element inspector with the <p> element highlighted). You can see the word immediately overflowing at the end of the <p>:
Any pointers in the right direction appreciated.
Instead of using absolute positioning, try using display:inline or display:inline-block (if you need to set height/width - Note: not supported in IE 7 and lower).
You could drop the display all together, because images and spans are inline to start with. I have an example here removing the span and just styling the image and surrounding link.
You could also use the image as a background for the button, and set the padding to account for the space. Example:
.button{
background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
padding: 0 0 0 15px;
}
example