I'm currently trying to perform a global update on all our sites that pull the central fonts stylesheet, in this update I'd like for it to add some spacing in between the icon provided by Font Awesome and some plain text that follows it in order to keep original styling and to center the icons vertically on that text.
That being said, I've already got it to center vertically since we only use small icons. I've been giving this a go for a little bit and this is what I've come up with:
#import "font-awesome-4.4.0/css/font-awesome.min.css";
.fa {
color: inherit;
vertical-align: middle;
display: inline-block;
line-height: inherit;
}
.fa:only-child {
margin-top: -3px;
}
.fa + * {
margin-left: 5px;
display: inline-block;
vertical-align: middle;
}
for the most part it does pretty good, what's weird though is that the .fa:only-child rule will apply, and the .fa + * rule does NOT apply when the icon tag is placed next to plain text like:
<button><i class="fa fa-save"></i>SAVE</button>
but the .fa + * WILL apply if the icon tag is placed next any other html tag (also failing the :only-child pseudo-class) like:
<button><i class="fa fa-save"></i><span>SAVE</span></button>
but in doing so, I'd need to update every page to include new tags (which could take weeks possibly) and I'd need to correct the styling for those span tags to inherit everything from the parent.
I've also attempted a javascript solution but I didn't really like the fact of having to iterate through each DOM element looking for the occurrence, nor did I like that it would need to be re-run upon dynamic content being added.
Is there a way to solve this without doing any of the above scenarios?
I also need to serve instances where the button contains no text, only an icon like:
<button><i class="fa fa-save"></i></button>
so unfortunately I can't just give all the .fa instances a margin of 5px.
tl;dr: I want to add 5px of margin in between any tag containing class .fa and whatever follows it, including plain text
~Thanks in advance~
The problem, as stated in the comments, is that CSS does not target plain text. So that's a dead end.
However, we can use a trick, based on HTML's whitespace collapsing. If there's a space inside the button at the very end, the browser will treat it as if it's not there. In other words, a space after the <i> right before the </button> will be ignored.
The solution, therefore, is to put a space in the .fa::after.
This only works if the .fa itself is an inline element, otherwise the space will be ignored right there, so we will have to change its display value back, and we may have to fiddle around with some other margins to get it right.
In this example, I have reduced all margins and paddings as much as possible, so you can see there is no space in the button when there's just the icon, only when there's also plain text.
/* emulate FontAwsome */
.fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
.fa-save:before,.fa-floppy-o:before {content:"\1F4BE"}
/* Added by me */
button {border:4px outset rgba(128,128,128,.7); padding:0; font-size:20px;}
button::-moz-focus-inner {padding: 0; border: 0}
button .fa {display:inline;}
button .fa:after {content:' '}
<button><i class="fa fa-save"></i></button>
<button><i class="fa fa-save"></i>Save</button>
Related
I am working on a CSS userstyle and the problem is that I can't seem to modify images in buttons coded into a web page's html code:
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
the closest i can get to changing this through CSS is to change the code of the actual button and change its background through .subscribe-button-container .subscribe .dropdown-menu li form .control-group button{background-image:url("http://i.imgur.com/XYHilSy.png");}, rather than replace the image contained within it. It is possible to achieve what I am trying to do, or are such images simply hardcoded into the HTML?
I read these:
How to change an input button image using CSS?
Adding an image to submit button using CSS
Submit Button Image
but they all assume that I can modify the html code, while I can only try to override the css
You cannot modify HTML with CSS, you can only modify the appearance of HTML. Since the image url of an <img> is specified in HTML, you can't change it.
Here's what you can do:
Hide the image (display: none or opacity: 0)
Specify a background image for the button
Using a pseudo element as a sort of "stand-in" image tag may be worth exploring.
This solution will provide you with more flexibility in regards to styling this element in ways that wouldn't be possible with background images.
Think of the :pseudo-elementin this case as your "artificial img element" which serves as the "replacement" for the original img element you have now hidden.
.btn img {
display: none;
}
.btn:before {
content: "";
display: block;
background: url(https://s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png);
max-width: 18px;
max-height: 18px;
width: 18px;
height: 18px;
}
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
MDN
::before creates a pseudo-element that is the first child of the
element matched. It is often used to add cosmetic content to an
element by using the content property. This element is inline by
default.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
I have an icon set and CSS code to bind the icons to an element, but I can't get the "i" tag to work with the icon set w/o filling it with content. Do I have to add custom code for the tag?
I've seen Twitter Bootstrap use the "i" tag for icons.
Also, I've tried the span tag, and that doesn't work either. It works when I use "li" or "div" tags, tho.
What am I missing? Thanks in advance!
This does not work
<i class="icon icon-accessibility"></i>
This works
<i class="icon icon-accessibility">BLAH</i>
example of my CSS
.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }
The <i> tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.
If you still want to keep it and not use something else like a div, the problem is that the <i> tag is an inline element, not a block element like a div. Add display: inline-block; to your CSS and it will work.
You can just use an img tag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.
Semantics aside, you're not seeing anything because the <i/> element is inline by default. You likely want to add display: inline-block; to the .icon ruleset to match how Bootstrap renders their icons.
If you care about semantics, use a <div/> or <span/> instead.
Brthr, just add a 'display: inline-block' to your '.icon', it might work
I have a few classes that adjust font sizing:
.text-tall {
font-size: 1.5em;
}
.text-small {
font-size: .8em;
}
When I apply the class to a paragraph element
<p class="text-tall">Some text goes here.</p>
the styling work as expected. When I apply it to a span element
<p><span class="text-tall">Some text goes here.</span></p>
the adjusted font-size is applied to all text below the element on the page, sometimes resulting in progressively larger and larger text.
The obvious solution would be to simply always apply the class to the paragraph element, but my paragraph bottom margin is relatively sized (margin-bottom: 1.5em), so doing that increases the margin, too, which is something I don't want to do.
This only seems to be a problem in IE8 and lower. Any suggestions would be appreciated!
Thanks for the tips, everyone. Turns out a function in my functions.php file (in WordPress) was removing the ending </span> tags.
Try specifying the text-tall div with the span in the CSS. For example, you could do this:
.text-tall span {
font-size: 1.5em;
}
You may also be able to do the same thing with the text-small.
I see lot of times attempts to hide text with CSS, for instance:
<a class="back">back</a>
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
I always wonder why not to use:
a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
It seems to me semantically correct, and in addition, when I tried the text-indent approach, it caused a bug in iPad display: The text was displayed 99999px left to the anchor tag and caused a strange unnecessary horizontal scroll.
Is there a common known problem with the second code or it's OK to use?
font-size: 0px; should do the trick.
If you want to make the button smaller than the text, you'll also need to add line-height: 1em; or something similar.
Using the display property allows you to edit the state of an element in C#.
Here are 4 main display elements people use:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page
But if you want to learn more about them you can go to this site: https://www.w3schools.com/cssref/pr_class_display.asp
w3schools explains a lot of languages in a simple and understandable way.
Don't hide content and depend on a background image at all.
HTML provides a way to include images which have meaning (the <img> element) with text content for situations where the image can't be displayed (the alt attribute). There is no need to fake it with the stylesheet.
<a class="back"><img alt="back" src="/images/back.png"></a>
Icons are content and deserve to be treated as such. All efforts to use text and background images are ultimately hacks with limitations. The <img> element was designed for this use case.