Font Awesome Unicodes not working

  • Resolved jadi100

    (@jadi100)


    8 years, 2 months ago

    Hi,
    I want to use css to insert FontAwesome-Icons before a string (with the :before pseudoclass). For this I have to use the unicodes of FontAwesome. The css looks like this:

    a:before{
    font-family: FontAwesome;
    content: “\f1b2”;
    position: relative;}

    Unfortuntely it doesn’t work. The result is not the icon (here a cube), but \f1b2 as a string (without inherited font-styling)

    The inline-method elsewhere on the same page works fine:
    <i class=”fa fa-cube”></i>
    So it appears to be not a problem with addressing the style-sheet via the themes functions.php

    Any idea what to do? Thanks for any hint.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Richie KS

    (@rkcorp)

    8 years, 2 months ago

    maybe try

    a:before {
font-family: FontAwesome !important;
content: "\f1b2";
position: relative;
}
    Thread Starter jadi100

    (@jadi100)

    8 years, 2 months ago

    Hi Richie,
    no the code doesn’t work either. I forgot to mention, that the backslash \ before the number does not appear (in both code-versions). Just the f1b2 is shown in the frontend before the string. Perhaps this gives a hint.
    … difficult …

    Theme Author Richie KS

    (@rkcorp)

    8 years, 2 months ago

    before of the wp css santize, you need to add extra ‘\’ to the css like this

    a:before {
font-family: FontAwesome !important;
content: '\\f172';
position: relative;
display:inline-block;
text-rendering: auto;
}
    Thread Starter jadi100

    (@jadi100)

    8 years, 2 months ago

    Wow! That’s it. I’m impressed. Its not even a theme-issue. Sometimes Wordress makes things unnecessarily difficult with this invisible satinizing. The not shown backslash was the crucial hint, I suppose (?)

    However, many thanks.
    Have a nice day!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Font Awesome Unicodes not working’ is closed to new replies.