Font Icon discussion continued

Justin Obara obara.justin at gmail.com
Fri Apr 26 13:35:11 EDT 2013


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

> 
> On 2013-04-26, at 1:04 PM, Justin Obara wrote:
> 
>> 2) We will setup classes to apply the font to an element
>> 
>> .icon-glass, .icon-music, .icon-search, .icon-envelope, .icon-heart, .icon-star, .icon-user, .icon-film, .icon-th-large, .icon-ok, .icon-remove, .icon-camera, .icon-time, .icon-road, .icon-download-alt, .icon-print {
>> 	font-family: 'fontawesome';
>> 	speak: none;
>> 	font-style: normal;
>> 	font-weight: normal;
>> 	font-variant: normal;
>> 	text-transform: none;
>> 	line-height: 1;
>> 	-webkit-font-smoothing: antialiased;
>> }
> 
> I'm guessing it would make sense to define a single class for this, that would be used for anything that wants to be that font? That way, if we add a 'character' to the interface, we wouldn't have to add its unique class name to this list.

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.


>> 3) We will inject the content (PUA unicode value) into the markup. In this case the :before pseudo-selector is used. However, we could have used :after or just applied it straight to the element.
>> 
>> .icon-music:before {
>> 	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 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/

Select one or more fonts, and click the "font" button at the bottom of the page. By default it will use PUA unicodes. Click the "Download" button and take a look at the css file provided. You should see that it breaks things out like the stylesheet for this demo, making it easy to know which code goes with which icon. There is also a sample index.html page provided to help with this.

Thanks
Justin

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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20130426/34b635bd/attachment.html>


More information about the fluid-work mailing list