Font Icon discussion continued

Justin Obara obara.justin at
Fri Apr 26 13:04:35 EDT 2013

Hi Anastasia,

Here's the link to the css file that Heidi used for her test page.

To highlight the important parts.

1) We need to import the the font icons we want to use.

@font-face {
	font-family: 'fontawesome';
	src:url('font/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('font/fontawesome.woff') format('woff'),
		url('font/fontawesome.ttf') format('truetype'),
		url('font/fontawesome.svg#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;

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;
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";
That's all done with CSS, no javascript needed. 

I think that's what you were looking for.
Hope that helps.

On 2013-04-26, at 12:46 PM, "Cheetham, Anastasia" <acheetham at> wrote:

> On 2013-04-25, at 4:11 PM, Valles, Heidi wrote:
>> This seems to be the way to go:
>>            <div class="icon-music" aria-label="This is a music note" role="img"></div>
>> A more real-life example, for UI Options, might be:
>>            <div class="icon-indicator" aria-label="Arrow indicating current theme" role="img"></div>
> Heidi, this looks nice and simple. Could you show us the associated CSS that would be required?
> -- 
> Anastasia Cheetham     Inclusive Design Research Centre
> acheetham at           Inclusive Design Institute
>                                        OCAD University
> _______________________________________________________
> fluid-work mailing list - fluid-work at
> To unsubscribe, change settings or access archives,
> see

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list