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" <[email protected]> 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
> [email protected] Inclusive Design Institute
> OCAD University
>
> _______________________________________________________
> fluid-work mailing list - [email protected]
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
