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

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

Ian Mackenzie
Ian Mackenzie
11,062 Points
Posted by 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
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
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
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.

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

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;
}