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

Harry Tran
Harry Tran
10,618 Points
Posted by Harry Tran
Harry Tran
10,618 Points

Only getting square boxes

html

<a href="#" class="btn btn-default btn-lg" data-icon="&#xe600;">iOS</a>
<a href="#" class="btn btn-default btn-lg" data-icon="&#xe601;">Android</a>

css

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-h0veom');
    src:url('fonts/icomoon.eot?#iefix-h0veom') format('embedded-opentype'),
        url('fonts/icomoon.woff?-h0veom') format('woff'),
        url('fonts/icomoon.ttf?-h0veom') format('truetype'),
        url('fonts/icomoon.svg?-h0veom#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;
}

This and the right arrow glyphicons only show me a square box in Chrome while nothing shows up at all in IE.

3 Answers

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;
}
John Norris
John Norris
21,145 Points

Using this @font-face code got it working for me. Thanks!

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

I was stuck too, I noticed the unicode was different from icomoon where they display it as:

&#xe600;

for iOS and in this project its displayed as:

&#xe000;

Changing it to this worked which would make me think that the project file is out of date perhaps.

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

I think you just forgot the quotes around the content. Not sure how the font iconmoon works but you can put a character or img url in the content attribute.

[data-icon]::before {
    font-family: 'icomoon';
    content: 'url("images/icon.png")';
}
Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

So if icon moon replaces letters with icons, just type the letter in there, otherwise an image.