CODEWITHSUNDEEP
htmlcssfont-awesome
iam-decoder
iam-decoder

Reputation: 2564

Styling plaintext after Font Awesome icon

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~

Upvotes: 3

Views: 1261

Answers (1)

Mr Lister
Mr Lister

Reputation: 46579

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>

Upvotes: 1

Related Questions