Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Sebastian Graus
Sebastian Graus
633 Points
Posted by Sebastian Graus
Sebastian Graus
633 Points

Icomoon displaying wrong icon

Hi,

I'm trying to use IcoMoon icons in my Divi Wordpress theme. The CSS is correct:

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?flfrbs');
    src: url('fonts/icomoon.eot?flfrbs#iefix') format('embedded-opentype'),
         url('fonts/icomoon.ttf?flfrbs') format('truetype'),
         url('fonts/icomoon.woff?flfrbs') format('woff'),
         url('fonts/icomoon.svg?flfrbs#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
       content: "\e900";
}

I then use this code to display the icon which is supposed to be three menu bars. 

.mobile_menu_bar:before,
.et_toggle_slide_menu:after {
    position: relative;
    top: 0;
    left: 0;
    font-size: 32px;
    content: "\e900" !important;
    cursor: pointer;
}

Instead of using the correct icon, it displays two upside down arrows.

Has anyone else had this problem? Is it getting information from any else icon font kit?

3 Answers

Carl Sergile
Carl Sergile
16,570 Points
Carl Sergile
Carl Sergile
16,570 Points

Fontface? I use Font Awesome because...well its awesome lol

Sebastian Graus
Sebastian Graus
633 Points
Sebastian Graus
Sebastian Graus
633 Points

Right, but can I use Font Awesome when I can't edit the html? The menu-icon is chosen by this line in the css:

content: "\e900" !important;

Is there a "content" code for Font Awesome?

Carl Sergile
Carl Sergile
16,570 Points
Carl Sergile
Carl Sergile
16,570 Points

Ya there is actually. Havent really used it much but..google: font awesome content code examples. First thing that pops up thats the one. On my phone and couldnt copy and paste the url for some reason :-/