Font Icon discussion continued

Justin Obara obara.justin at gmail.com
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.
https://dl.dropboxusercontent.com/u/4345316/pua-test/pua.css

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');
	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.
Justin

On 2013-04-26, at 12:46 PM, "Cheetham, Anastasia" <acheetham at ocadu.ca> 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 ocadu.ca           Inclusive Design Institute
>                                        OCAD University
> 
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work

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


More information about the fluid-work mailing list