Font Icon discussion continued

Cheetham, Anastasia acheetham at
Fri Apr 26 14:03:52 EDT 2013

Thanks for the information, Justin. Comments in-line.

>> I'm guessing it would make sense to define a single class for this
> Yes we could do that. So we would just have to have two classes applied. 1) to setup the font 2) to inject the content.
> The creator of iconmoon also suggested an alternative, but notes it will take longer to process.
> [class*="icon-"]
> In this case it finds all elements that have a class starting with "icon-" and sets up the font for it. This way you don't have to have two classes, or the long list of class names in the stylesheet. However, it would also make using icons from different font families more difficult.

I think having two classes would be fine. We seem to be pretty accustomed to using multiple classes where necessary.

So that might look like:

    <div class="fontawesome-icon icon-music" aria-label="This is a music note" role="img"></div>


    .fontawesome-icon {
        font-family: 'fontawesome';
        speak: none;
    .icon-music {
        content: "\e001";

>> To do this, we'd need to know the PUA unicode value of the character we want, right? Is that something that's easy to determine by someone who didn't create the font? Does it require any special software to examine the font file?
> Actually the style sheet used here is either the one generated by icomoon or derived from it. The \e001 is the actual PUA unicode. You can see a list of others here . The stylesheet generated from Icomoon makes it pretty clear what is what, so the person creating the font should either setup our stylesheet or pass along the generated one to the person who will.
> It will probably be a bit clearer by running through the icomoon app. 

I'm thinking more about the workflow of someone trying to use a font that's already been created. Say, for example, Arash creates a beautiful font full of icons for the Video Player and someone has to modify the current stylesheet to use the new font. It sounds like Arash will provide them with the font and the generated stylesheet. The person would simply look up in the generated stylesheet for the "play" icon (for example), and use the associated PUA unicode they find in the updated Video Player CSS. Does that sound about right?

Anastasia Cheetham     Inclusive Design Research Centre
acheetham at           Inclusive Design Institute
                                        OCAD University

More information about the fluid-work mailing list