On 2013-04-26, at 1:11 PM, "Cheetham, Anastasia" <[email protected]> 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
> [email protected] Inclusive Design Institute
> OCAD University
>
> <winmail.dat>
_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
