CSS Button Patterns: Picto and Icon Fonts

Last week I published an article on the design pattern I’ve been using for CSS buttons. I wanted to add to it further by diving into a new practice that has been getting some attention in the web world lately, Icon or Picto Fonts. With the limited support for SVG graphics currently and the increasingly demand for scalable graphics with responsive designs and higher and higher pixel dense displays, Picto fonts are a great way to get started. Typically with just icons in an image sprite, you’d need to include two or three different versions of the sprite depending on the pixel density of the display and use media queries to swap them out. Now with picto fonts, there’s no need. Check out the demo first, then follow along below.

Example Output Image

HTML


<a class="button blue picto picto_heart" href="#"><span>Basic Button</span></a>
<a class="button green picto picto_thumbs_up" href="#"><span>Basic Button</span></a>
<a class="button yellow picto picto_thumbs_down" href="#"><span>Basic Button</span></a>

Pretty much the same markup as the previous examples, the only difference is the new class “picto” and “picto_xxx.”

CSS


a.picto span            { padding-left: 2em; display: inline-block; position: relative; }
a.picto span:before         { position: absolute; line-height: 1em; left: 0; top: -.25em; font-size: 1.5em; display: inline-block; font-family: 'ModernPictogramsNormal'; content: 'j'; text-transform: none; }
a.picto_thumbs_up span:before   { content: 'l'; }
a.picto_thumbs_down span:before { content: 'L'; }

The first line of CSS is a lot like the icon example, just have to pad enough room for the pictogram. Next you need to use the pseudo class :before to add characters in the special pictogram font. After you have the first rule established, the following rules just need to swap out the characters, just like the background position in the icon example. Depending on what picto font you use, you might need to adjust the top position. Use EM’s not PX’s so it can scale.


@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Don’t forget to include your font. I found this font with the help of CSS Tricks icon font roundup on Font Squirel. Good thing about this font… it was free! and Font Squirrel has an @font-face generator that helps you create all the formats you needs, and will even give you example CSS for them!

So that’s it! None you have scalable buttons for your responsive builds. Have you taken advantage of this technique yet in production? Did you run into any gotchas?

posted in: Front End Development
tagged: , ,

1 Comment
  1. Dutch Icon Designer

    Hi Pete,
    Thanks for using our icons on your site, it looks great!
    Interesting stuff you are talking about.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *