CODEWITHSUNDEEP
css
wryrych
wryrych

Reputation: 1765

Where to display font icons: as a separate element or using existing one?

In a project some icons (from Icomoon app) are added via separate element (e.g span), and some are displayed adding particular class to existing one, e.g

<span class='icon-archive'></span>
<span class='foo'>some text</span>

<span class='foo icon-archive'>some text</span>

The styles are something like this

[class*='icon-']:before, .icon:before
  display: inline-block
  font-family: 'foo-glyphs'
  speak: none
  font-size: $icon-font-size
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-transform: none
  -webkit-font-smoothing: antialiased

.icon-archive:before
  content: "\e000"

Lately I noticed some problems with vertical alignment - probably because css doesn't have line-height: 1

I would like to know which strategy is better (or maybe either of them is good)?

Upvotes: 4

Views: 175

Answers (1)

kmoe
kmoe

Reputation: 2083

I think it depends whether the function of your icons is content or presentation. If the icons are just adding decoration to text (e.g. a floppy disk icon next to a "Save" link etc), I would favour the method using the pseudo-element :before (rather than adding a span element just for the icon) for a cleaner DOM and better separation of concerns.

However, if the icons are the only way you are presenting the information to the user, you should insert them as span elements. A major reason for this is that screen-readers do not respond well to pseudo-elements.

Lastly, if you have to support IE8, you don't have the option of using :before, so it's an easy choice in that case! EDIT: This isn't true. See caniuse or this question.

Upvotes: 1

Related Questions