Font Icon discussion continued

Cheetham, Anastasia acheetham at
Fri Apr 26 13:11:42 EDT 2013

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.

> 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?

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

More information about the fluid-work mailing list