Automattic/Genericons

class for icons inline w larger text

buffler opened this issue · 1 comments

First of all: thanks for such an awesome resource!

I like the idea of having some helper classes on hand (see #52, related, I think), and found a use for something like the following earlier today:

.genericon-inherit {
  font-size: inherit;
  line-height: inherit;
}

helpful, for example, when adding an inline icon to a twitter profile link:

<a href="https://twitter.com/jeremybuffler" title="Follow Jeremy on Twitter">
  <i class="genericon genericon-twitter genericon-inherit"></i>
  @jeremybuffler
</a>

Basically, when inline with text that has a font-size larger than 16px, icons might stick out kind of oddly from the surrounding text - but this ruleset seems to size & align them pretty well.

This (along w other helper classes, or at least those that would mess w icon sizing) seems to fall outside the philosophy of emphasizing crispness over flexibility - prob an enhancement at most - but seemed useful enough to me to warrant suggesting / seeking feedback.

thoughts?

I think this is the sort of thing that should be added to your own stylesheets, rather than the Genericons base, for the reasons you allude to. Icons are drawn in pixel sizes, even if they are vector graphics.