Extend placeholders instead of classes

Extend placeholders instead of classes for icons.

Saves about 5k and 70 selectors in the output of global.css

To avoid selector creep like this mess I created without knowing it:
```css
.related .item--video .item__title--has-icon-mobile .i,
.related .item--video .item__title--has-icon-mobile .caption:before,
.related .item--video .item__title--has-icon-mobile figcaption:before,
.related .item--video .item__title--has-icon-mobile .from-content-api blockquote.quoted:before,
.from-content-api .related .item--video .item__title--has-icon-mobile blockquote.quoted:before,
.related .item--gallery .item__title--has-icon-mobile .i,
.related .item--gallery .item__title--has-icon-mobile .caption:before,
.related .item--gallery .item__title--has-icon-mobile figcaption:before,
.related .item--gallery .item__title--has-icon-mobile .from-content-api blockquote.quoted:before,
.from-content-api .related .item--gallery .item__title--has-icon-mobile blockquote.quoted:before {
  // rules
}
```

![ ](http://media.giphy.com/media/3qaUhLknPw6NW/giphy.gif)