My Beefy Adventure with Icon Fonts pt 1: Pictos

First off, I don’t even eat beef. Secondly, I think icon fonts are nifty. My relationship with them however, has started off kinda rocky.

CSS Tricks has a great article on using icon fonts semantically, the best you can, as well as an extensive round up of the fonts out there. I’ve had a few personal experiences with three of them recently that I’d like to share over the next few days.

Pictos

It was relatively hard for me to find just how to start with Pictos, as there’s not really a clear link on getting started from their home page. After some digging, I found this: http://pictos.cc/articles/using-icon-fonts/

I like their suggested use of the data-icon attribute for implementation:

 <a href="" data-icon="C">Cool Link</a>

This mixed with their recommended CSS properties will generate the content of the attribute with CSS. You can also specify in your CSS to use the ::before or ::after pseudo-elements.

Adjusting the CSS

When I first dropped in the code and refreshed my browser, everything was printed out, but looked a bit off aesthetically. For this particular project, and most of my icon font experience, most of my icons were being applied to headings. Because of this, the icon fonts were being bolded since my headings were bold, so I needed to globally take off the font-weight: bold. My global styles for pictos ended up being:

[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

Accessibility

The Using Icon Fonts article touches on the accessibility of icon fonts up front, that’s a nice touch. They link to Eric Eggert’s article about adding ARIA attributes to icon fonts to prevent screen readers from reading elements like “D Delete” by adding: aria-hidden=”true”. Definitely worth a read if you haven’t already.

Beware of text transform rules

With Pictos you can choose your triggers/character mapping. When you choose the triggers, they are case sensitive. This is a good thing to be able to have the freedom to choose this. However, not paying attention to this, I went to put some icons onto this group of links and instead of the icons, it printed out the letter. I tried a few different combos, but nothing worked. I then realized that in my CSS, the rule for the element I put the data-icon attribute on had this rule:

  .drop { text-transform: uppercase;  }

Which the generated content on the element will inherit, hence the capitalization of the icon and not receiving the image font.

I created an icon fix mixin for this in Sass:

@mixin pictos {
    &:after { text-transform: none; }
    &:before { text-transform: none; }
}

So now I have to manually add that to the CSS rules. I could do it for all Pictos rules, if we know we won’t be using any uppercase shortcuts. But in this case, I do not know that.

The HTML work doesn’t free you from CSS declarations and inheritance

By adding a data attribute to the HTML to get the icon to generate, an expectation is kinda set that’s all it takes. I begin to take for granted just how far the icon font will take you. If the font size of the icon should be larger (or smaller), then you’ll still need to declare those sizes in the CSS. By default, the generated icon will be the same size as the element you are putting it on. Just like how it gets the text-transformation rules.

With that in mind, I’ve updated the mixin for customization:

@mixin pictos($transform: none, $color: inherit, $font: inherit ) {
    &:after { text-transform: $transform; color: $color; font-size: $font; }
    &:before { text-transform: $transform; color: $color; font-size: $font; }
}

Of course, changing font-size can have quite an undesirable effect on your vertical alignment, so I’ll add something to control that as well:

@mixin pictos($transform: none, $color: inherit, $font: inherit, $vertical: middle) {
    &:after { text-transform: $transform; color: $color; font-size: $font; vertical-align: $vertical; }
    &:before { text-transform: $transform; color: $color; font-size: $font; vertical-align: $vertical;  }
}

I found one of the biggest bummers of Pictos was that the icon sizes and heights didn’t seem to match up well with each other or the elements that they were being placed on. Some were too tall, some were too short, like the Goldilocks of icon fonts. This meant almost all of the elements needed an additional class to target them and fine tuning applied.

Remember how I liked the data-icon attribute? NM!

So the problem with the generated content approach was making this work in IE7 and below. For decorative elements, it’s no biggie if they didn’t show up, but some stand alone icons and some important enhancements needed some tweaking. For example, there was an expand/collapse element that needed the markup adjusted to be:

<a href="#">Example Menu <span title="Expand" class="icon">+</span></a>

This is because without the icon showing up, the functionality of the link being expland/collpase would be lost. We then need an .icon class in our CSS to set the font-family to Pictos.

Self-hosting? Not so fast.

I first tried this out with the Pictos hosted option. When moving over to the self-hosted option, you have to make sure that all of your icons are chosen, as I have yet to find a way to avoid being charged each time you download, which means you can’t make edits to your set. Let me know if anyone else has had luck with this.

Let me predict what will happen to you next. So once you have that set and are cruising along, you will feel defeated when you realize it’s not working in Internet Explorer. You will try 100 things to fix it. You will sad face. You will then find this thread on the support base. There’s been a lack of support from the Pictos side, so users have been helping each other. That’s good, cause I dont know about you, but I would not have thought that the files that I received from my download wouldn’t work and in fact, the .ttf needs to be re-run through a generator like Font Squirrel, because the .eot file you receive is broke. Nutso! and totally frustrating, but that’s how you solve it.

I don’t know about others experiences, but I say tread cautiously with this one.

Up tomorrow: Symbolset.