The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #46218

    @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;
    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.


    Also take a look at this:

    [Paul Irish: Bullet Proof Font Face]( “Paul Irish: Bullet Proof Font Face”)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.