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

Joshua Bivens
Joshua Bivens
8,586 Points
Posted by Joshua Bivens
Joshua Bivens
8,586 Points

Icons not working for me.

Relevant CSS:

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

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-apple:before {
    content: "\e600";
}
.icon-android:before {
    content: "\e601";
}

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

and HTML:

<div class="col-sm-5">
            <p><strong>Or visit an app store to download now!</strong></p>
            <a class="btn btn-default btn-lg icon-apple" href="#" data-icon="&#xe600">iOS</a>
            <a class="btn btn-default btn-lg icon-android" href="#" data-icon="&#xe601">Android</a>
          </div>

3 Answers

Jake Rorrer
Jake Rorrer
17,788 Points
Jake Rorrer
Jake Rorrer
17,788 Points

Two things I see...

  1. For your "icon-" attribute selector, you just need this...
[class^="icon-"] {

}

Or this...

[class*="icon-"] {

}

Having both selectors is redundant.

And 2. For the [data-icon]::before selector, remove one colon so that it is [data-icon]:before

Try those 2 things and see if it works. Hope that helps!

zhuoyu zhu
zhuoyu zhu
9,806 Points
zhuoyu zhu
zhuoyu zhu
9,806 Points

I also had the same problem and I found that if i used the @font-face code downloaded from project zip file, it worked but I used the @font-face codes downloaded directly from icomoon it won't. I have no idea why. Anyone has any ideas?

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;
}
zhuoyu zhu
zhuoyu zhu
9,806 Points
zhuoyu zhu
zhuoyu zhu
9,806 Points

Anyone has any ideas about this issue?

zhuoyu zhu
zhuoyu zhu
9,806 Points
zhuoyu zhu
zhuoyu zhu
9,806 Points

Just figure it out

Elijah Collins
Elijah Collins
19,457 Points

what did you come across to solve the problem?