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 CSS Foundations Web Typography Web Fonts

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

icon from ico moon doesn't display properly

code from the page code in the editor output

3 Answers

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

Are you using the icon font and is it being loaded in before you are loading your stylesheet?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Here is my code 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Web Fonts</title>

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrap">

        <h1 id="title" class="title"><span class="icon-star-empty"></span>CSS Preprocessors</h1>
        <p class="author">By: Guil Hernandez</p>
        <p class="intro">
            <span class="icon-cool"></span>You've probably already heard of <a href="#">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="#">Sass</a>, <a href="#">LESS</a> and <a href="#">Stylus</a>.
        </p>
        <h2>What's a Preprocessor?</h2>
        <p>
            Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available. 
        </p>
        <p>
            Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that &ldquo;If it's not broken, don't fix it.&rdquo; But lately, many have realized just how powerful preprocessors can make our CSS.
        </p>
        <h2>Why Use One?</h2>
        <p>
            There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create <a href="#">variables</a> from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage&hellip;
        </p>
    </div>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script type="text/javascript">
        $("#title").fitText();
    </script>
</body>
</html>

/* --------------------------
    Margin Reset
----------------------------- */

body, h1, h2, h3, p {
    margin: 0;
} 

/* ---------------------------
    Web Fonts
----------------------------- */

@font-face {
    font-family:"Mos Martin";
    src:url("montserrat/Montserrat-Bold.otf");
    font-weight:bold;
    font-style:normal;


}
/* --------------------------
    Icon Fonts
----------------------------- */

/* --------------------------
    Page Styles
----------------------------- */

body {
    padding: 4.65em 0;
    border-top: 8px solid #222; 
    background: #f9f9f9;
    color: #333;
    font-size: 1.125em;
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif;
}
p {
    margin: 1.6em 0;
    text-align: left;
}
a {
    color: #d24c39;
}

.icon-star-empty:before {
    content: "\e901";
}
.wrap {
    position: relative;
    margin: 0 auto;
    max-width: 58%;
}
.intro {
    margin-top: 3.15em;
}
.title {
    position: relative;
    padding: .82em 0 0 0;
    border-top: 1px solid rgba(51,52,52,.4);
    text-align: center;
    line-height: 1.33;
    font-family:"Mos Martin", sans-serif;

}
.author {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.778em;
}
h2 {
    margin: 1.25em 0 0 0;
    color: #2B9BD4;
    font-size: 2em;
    line-height: 1.1;
    letter-spacing:-2px;

}

/* --------------------------
    Media Queries
----------------------------- */

@media screen and (max-width: 599px) {
    body {
        font-size: 1em;
    }
    .wrap {
        max-width: 85%;
    }
    h2 {
        font-size: 1.6em;
    }
}
@media screen and (min-width: 980px) {
    .wrap {
        max-width: 600px;
    }
} 




.icon-cool:before {
    content: "\e905";
}
Luke Pettway
Luke Pettway
16,593 Points

I think you may be missing this:

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

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

Your icons don't have the font-family applied to them, so they are falling back to whatever the default font specific is. The above code may differ depending on how you output your icons, but setting the font-family to 'iconmoon' should hopefully fix it.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Thanks for you help Luke. But that does not seem to work. Do you know if I should download soemthing on my local computer? By now I just used the code that they displayed on the website

Luke Pettway
Luke Pettway
16,593 Points

At the bottom of the screen where you select your icons, it looks like you can also output the Font or an SVG

https://icomoon.io/app/#/select/font

I tested it and it seems to work well. There is also an SVG option you can use alternatively. Both methods will give you a demo.html that should work.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

I miss something.

the botton path

<div class="wrap">

        <h1 id="title" class="title"><span class="icon-star-empty"></span>CSS Preprocessors</h1>
        <p class="author">By: Guil Hernandez</p>
        <p class="intro">
            <span class="icon-spades">You've </span>probably already heard of <a href="#">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="#">Sass</a>, <a href="#">LESS</a> and <a href="#">Stylus</a>.
        </p>

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

}
.icon-spades:before {
    content: "\e906";
}
Luke Pettway
Luke Pettway
16,593 Points

In the download, does demo.html work? This is from the Iconmoon site:

Why doesn't my font glyph show up?

Check if the generated demo.html file (after unzipping) has the same issue. If it does, please contact us. If you are trying to install and use the TTF font in a desktop application, see this guide. If you are hosting the fonts yourself, make sure to set CORS headers properly. Check your browser's console to see if there are any reported issues related to the font. If you can see the icons in the demo.html but they don't show up in your own implementation, try to find the difference between the demo and your own code. If you still couldn't figure out what's wrong, try to make a reduced test case and contact us.