Dude, You've Been Font-I-Con'd!


Created by Mika "Ipstenu" Epstein for WordCamp NYC 2014

https://halfelf.org | https://helf.us/wcnyc2014

Mika Epstein

aka Ipstenu


  • Support Forum Moderator
  • Plugin Reviewer
  • Core Contributor
  • Beta Tester
  • Trainer
  • ... Half Elf


  • WordPress Specialist
  • ... and Manager
  • WordPress Trainer
  • De-Hacker
  • Dedicated WP Resource
  • ... Half Unicorn

A font "icon?"


Why bother?

  • Easy to Style (size, color, flip, shadow, rollover effects)
  • Born for retina
  • Replace CSS Sprites

Use 'em the easy way!

  1. Include the font in your site
  2. Call the icon you want with the span html tag
    <span class="genericon genericon-aside"></span>
    <i class="fa fa-beer"></i>
  3. Drink a beer

Use 'em all fancy!

div.sharedaddy .sd-content li a::before {
    font-family: 'Genericons';
	font-size: 16px;
	color: #fff;

div.sharedaddy a.sd-button>span {
    display: none;

div.sharedaddy .sd-content li.share-twitter a::before {
    content: '\f202';
    color: #4099FF;

See Justin Tadlock's Social Nav Menu Examples for even more!

Let's show off!


Where can we find font icons?

Everything is awesome!

Well ... actually ...


My tech blog: halfelf.org

These slides: https://helf.us/wcnyc2014