Font Icon discussion continued

Justin Obara obara.justin at gmail.com
Fri Apr 26 14:09:15 EDT 2013


On 2013-04-26, at 2:03 PM, "Cheetham, Anastasia" <acheetham at ocadu.ca> wrote:

> 
> 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>
> 
> Then
> 
>    .fontawesome-icon {
>        font-family: 'fontawesome';
>        speak: none;
>        ...
>    }
>    .icon-music {
>        content: "\e001";
>    }
> 

That looks about right, although we'll likely be using a custom icon rather than one from fontawesome like we have here, but the idea sounds good.


>>> 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 http://jrgraphix.net/r/Unicode/E000-F8FF . 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. 
>> http://icomoon.io/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?

I think so. If you are saying, we have a font already, and want to add one more icon to it. We'd need to create new font files. Then update the css to include the style which will inject the PUA for the new icon.

> 
> -- 
> Anastasia Cheetham     Inclusive Design Research Centre
> acheetham at ocadu.ca           Inclusive Design Institute
>                                        OCAD University
> 
> <winmail.dat>



More information about the fluid-work mailing list