Glyph Wars
A look on how CSS frameworks do them
Glyphs are characters from fonts that look like icons. As simple as that.They can be placed either before or after a block of text.
We can't argue that we got used to icons next to text, so used to them that sometimes the “title” attribute of the element is describing are missing (for no reason). Is that fair? Replacing a block of text with an icon that may or may not describe an action / interaction? Put user interface above user experience?
But we are not here to look more into that. Todays post will be more about frontend rather than design (as in my first post). One day I’ve got into a pickle, I needed to add an icon next to a hyperlink. That didn't sound like a challenge. So I went reusing classes that I've already styled (check the code below)
a.normal-link{ border-bottom: 1px solid #F3DBDE; line-height:15px; text-decoration: none; color: #C74D5A; display: inline-block;}
.back-icon:before{ content: “\f015"; //and non interesting code}
<a class=”normal-link back-icon”>Go back, please</a>
Looks nice no extra mockup… But that won't work. Not the desired feel to it. The thing is that we didn't want to use the normal text-decoration: underline, instead we added a subtle border-bottom (yes I know this works only for one line links.). So that bottom border made me bump into the question… Is it really the best way to use glyphs?
So I went researching.
Bootstrap way
I took a look into the pro choice of the web those days.
<span class=”glyphicon glyphicon-search”></span>
Spans ?! Why? I do myself overuse spans. Can’t really help myself.
CSS is analysed and interpreted before rendered. Based on @github’s somehow recent studies (skip to the 14th minute and listen),they just by not using a <div class=”something></div> and use a <b></b> instead… boom 3.5% improvement.
So yeah… I said I’m gonna use a weird tag I don't usually use and prepend my hyperlink text with that, like they do in the buttons. Wait… what? What did github's 2012 css performance just taught me? “Stripp all the unnecesary html”. My idea of using the :before pseudo was better. Then I said to myself “they are doing it wrong”. Well not wrong… less optimal, and that border-bottom problem wouldn't go away.
So I continued searching…
Foundation way
This is the second option and a bit more of my taste. I skipped right to to CSS part and I was very happy to see a :before pseudo. Uhuu… jackpot. Then I’ve checked their source code.
First of all they are using <i></i> tags for the glyphs. Thumbs up for listening to github. Worst part was that inside those <i></i> tags there were <p></p\>(pees as in paragraphs, as in block elements). Yes, yes I know we are not in the Stone Age Era anymore, blocks inside non-block elements are not bad.
But why use them in the first place? I've removed the <p></p> from the code and noticed that they mostly used it to style the text inside (adding a gap between the icon and the text, not like bootstrap’s button example where they use “ ”). That kinda makes sense… Now I can add border bottom to a <b> tag inside that <i>.
But still… not optimal enough though. So I stopped searching for answers. Started using my brain. Maybe this is different use case where a framework can’t help that much.
My way
.icon { position: relative;}
.icon:before { content: “\f015"; display: block; position: absolute; width: 10px; height: 6px; left: 10+gap(px); top:something;}
Works like a charm… (http://cdpn.io/atDHc). Even makes more sense when you the glyph inside let’s say a button.
