Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Framework Basics Build a Website with Bootstrap Adding Icon Fonts with IcoMoon

Ian Mackenzie
Ian Mackenzie
11,062 Points

Not getting the unicode

The IcoMoon app has changed and does not work as shown by the instructor in his video. The training video shows unicode that is changed into another code to enter into the html. Not working the same for me so I've become a bit lost as to what to do next.

4 Answers

Brian Hernandez
Brian Hernandez
20,285 Points

How are you thinking of adding the icon-fonts to your page? Do you have any code examples?

If you go to the IcoMoon App page, looks like you can choose the icon-fonts you want to use then at the bottom, download them via the 'font' button. In the download should be a fonts folder with .TTF, .SVG, .EOT and .WOFF files which you will link to in your CSS file that contains the styles and such for your site. The download should also come with a basic CSS file that has the @font-face code you can copy and paste into your own CSS file. Should look something like this:

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

Then, in your HTML file where you want the icon-fonts to show up, you would add the class of the corresponding icon-font. This would be the icomoon icon-font for a plus sign. All the icon-font classes should start with a icon-.

<span class="icon-plus">...</span>

Were you thinking of a different way to add them though?

Ian Mackenzie
Ian Mackenzie
11,062 Points

I think the instructor in this lesson was doing it another way, however I think I go with your suggestion to use icomoons implementation.

Thanks for your help!

Nina Lee
Nina Lee
14,670 Points

download the icon font as the instructor, and open the file iconmoon.svg

<glyph unicode="&#xe600;" d="~~~" />
<glyph unicode="&#xe601;" d="~~~"/>

and you can find the unicode here, copy and past it to the data-icon attribute.

So I figured it out, after I applied the code from Brian Hernandez on another form the paged loaded the icons.

HTML

<p><strong>Or visit an app store to download now!</strong></p>
            <a class="btn btn-default btn-lg" data-icon="&#xeabf;" href="#">IOS</a>
            <a class="btn btn-default btn-lg" data-icon="&#xeac1;" href="#">Android</a>

CSS

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

[data-icon]::before {
    font-family: 'icomoon';
    content: attr(data-icon);
    margin-right: 8px;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}