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

"Sweet!"

Created by Mika "Ipstenu" Epstein for WordCamp NYC 2014

https://halfelf.org | https://slides.halfelf.org/wcnyc2014

Mika Epstein

aka Ipstenu

WordPress.org:

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

DreamHost

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

A font "icon?"

Wingdings

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 ...

THE END

My tech blog: halfelf.org

These slides: https://slides.halfelf.org/wcnyc2014