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

Question

In the project, some icons (from the Icomoon app ) are added through a separate element (for example span), and some are displayed with the addition of specific classes to the existing one, for example

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

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

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"

Recently, I noticed some problems with vertical alignment - perhaps because css doesn't have line-height: 1

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

Answer 1

, , . (, "" ..), , :before ( span ) DOM .

, , span. , .

, IE8, :before, ! EDIT: . . caniuse question.