My 2 cents on icon fonts

Craig, our UX Design Lead, recommended we transition to icon fonts last year and since then, my love for icon fonts just keeps growing! I could go on and on about the benefits of using icon fonts…

  • great for responsive web design and retina display
  • less maintenance on your sprite sheets
  • can all be controlled with CSS – colors, sizes, shadows

Get on the band wagon. Implement icon fonts onto your sites! Here are a few resources to help you get started:

Tips on implementation

  • Make sure your fonts are served from the same domain or enable CORS
  • Remember to version your font file in your CSS if you’ve added or modified your icon list
  • [My Fav] Use pseudo elements to stack multiple fonts (a.k.a stackicons) on top of one another
  • Convert SVGs into icon fonts in IcoMoon (click on Import)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s