Issue Icon Font via content: attr(data-icon)

[stickymike]

• Home

@font-face {
font-family: “FontAwesome”;
src: url(‘../font/fontawesome-webfont.eot’);
src: url(‘../font/fontawesome-webfont.eot?#iefix’) format(‘eot’),
url(‘../font/fontawesome-webfont.woff’) format(‘woff’),
url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’),
url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
*:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
text-decoration: inherit;
}
[data-icon]:before{
content: attr(data-icon) ” f03e”;
font-size: .6em;

I am having allot of difficulty with the attr(data-icon). As a method of debugging I wrote the previous code. The code is displaying f03e and then appropriate icon following it. The attr(data-icon) is correctly being “read” but isn’t displaying the appropriate icon. Obviously I am new… but what am I over looking?

Im assuming that because I’m getting an icon with the hard coded ” f03e” portion, that the doctype @fontface and charset is correct, hence my complete confusion.

[will_wallace85]

Also take a look at this:

[Paul Irish: Bullet Proof Font Face](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ “Paul Irish: Bullet Proof Font Face”)

[Author]

Posts