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

Jonny Strange
Jonny Strange
6,412 Points
Posted by Jonny Strange
Jonny Strange
6,412 Points

IcoMoon Fonts

Hey, I'm trying to add some IcoMoon fonts before my links in a list, but having trouble with this, can anyone help??

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

What have you tried?

The easies way is to download the Icomoon font files.

Place the font files somewhere that makes sense. Copy the CSS that is generated with the download, and add it to your CSS. You may need to correct the path to the font files for your specific project. Once all that is done, the easiest way I usually do it is to add the font icons with CSS. I usually use the :before psuedo element. Each Icomoon icon will have a code in the CSS that comes with the download. So the CSS you need might look like

.anchor:before {
  content: "e0467";
}
Jonny Strange
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

CSS

/***************************************************************** GLOBAL STYLES ******************************************************************/

/****************************************************************** GENERAL STYLES *******************************************************************/ img { width: 100%; }

/****************************************************************** HEADER STYLES *******************************************************************/ header.main-header { height: 130px; width: 100%; margin-top: 0; float: left; background-color: #222; }

logo

{ margin: 0; text-align: center; }

h1#title { margin-top: 9px; font-size: 2em; color: #c60000; }

h2#sub-title { margin: -3px; font-size: 1.25em; font-weight: normal; color: #c60000; }

/****************************************************************** ACHOR STYLES ****************************************************************/ a { text-decoration: none; } /*************************************************************** NAVIGATION STYLES *******************************************************************/

/****************************************************************** MOBILE NAVIGATION STYLES *******************************************************************/ nav { margin-top: 35px; }

.navbar-inverse { border: none; }

.navbar-inverse .navbar-toggle .icon-bar { background-color: #c60000; }

.navbar-inverse .navbar-nav > li > a { color: #fc4949; }

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #c60000; }

/****************************************************************** BRANDING STYLES *******************************************************************/

/****************************************************************** LOGO & ICONS STYLES *******************************************************************/

/****************************************************************** TYPOGRAHY STYLES *******************************************************************/ @font-face { font-family: 'icomoon'; src:url('libs/fonts/icomoon.eot?-a4cu77'); src:url('libs/fonts/icomoon.eot?#iefix-a4cu77') format('embedded-opentype'), url('libs/fonts/icomoon.woff?-a4cu77') format('woff'), url('libs/fonts/icomoon.ttf?-a4cu77') format('truetype'), url('libs/fonts/icomoon.svg?-a4cu77#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; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-youtube:before { content: "\e605"; }

.icon-facebook:before { content: "\e604"; }

.icon-twitter:before { content: "\e603"; }

.icon-linkedin:before { content: "\e602"; }

.icon-mail:before { content: "\e606"; font-size: 3em; }

h3 { padding: 0 0 0 9px; }

/****************************************************************** BODY STYLES *******************************************************************/ .wrapper { width: 100%; margin: 0 auto; }

/****************************************************************** CONTACT STYLES *******************************************************************/ p.general-info { margin: 6px 0 0 9px; font-size: 1.25em; }

.contact-info { }

.contact-info a {

}

/****************************************************************** FOOTER STYLES *******************************************************************/ footer { height: 80px; margin: 100px 0 20px 0; background-color: #222; color: #fff; border-color: #c60000; }

/****************************************************************** MEDIA QUERIES *******************************************************************/ @media screen and (min-width: 768px) { nav { margin-top: 14px; }

}

HTML

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="description" content="Hi, Jonny Strange and I'm a up and coming web designer" /> <meta name="author" content="Jonny Strange" /> <meta name="keywords" content="jonny, Jonny, strange, Strange, jstrange, JStrange, web design, Web Design" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <title>Jonny Strange | A up and coming web designer</title> <link rel="stylesheet" href="libs/css/default/bootstrap.min.css"> <link rel="stylesheet" href="libs/css/default/default.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="libs/scripts/js/html5shiv.js"></script> <script src="libs/scripts//js/respond.min.js"></script> <![endif]--> </head> <body> <header class="main-header"> <a id="logo" href="../index.html"> <h1 id="title">Jonny Strange</h1> <h2 id="sub-title" class="hidden-xs">Web Designer</h2> </a> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="../index.html">Portfolio</a></li> <li><a href="../about/about.html">About</a></li> <li class="active"><a href="contact/contact.html">Contact</a></li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </header>

<div class="wrapper" role="article">
<div class="row">
    <div class="col-xs-6 col-md-6">
        <h3>General Information</h3>
        <p class="general-info">I am currently looking for new design work, only short-term or small projects for now. If you have any questions please don't hesitate to contact me.</p>
        <p class="general-info">Email, Twitter and Facebook are the best way to reach me.</p>
    </div>
    <div class="col-xs-6 col-md-6">
        <h3>Contact Information</h3>

                <span class="icon-mail">

                </span>


    </div>
</div>

</div>

<footer>
<p id="copy">&copy; jstrange</p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="libs/js/bootstrap.min.js"></script> </body> </html>

In 'libs' folder I've got 'css', 'fonts' etc. Thanx for the code reformating but it's still not working correctly. The full code is above.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Sorry you are still having problems.

You do you mean by don't look right?

Can you post the code you are trying to use?

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I reformatted your code a bit to make it show up correct.

Okay, so first, assuming that from wherever this CSS files lives, there is a folder on the same level called 'libs', which has a folder inside it called 'fonts', which has those font files.

Now, assuming you wanted the mail icon before email anchor link, you should be able to add the .icon-mail class, something like so

<ul class="contact-info">
                <li><a class="mail icon-mail" href="mailto:webmaster@jstrange.co.uk">webmaster@jstrange.co.uk</a></li>
            </ul>
Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I haven't done a lot with IcoMoon, but I found this article http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/. Are you adding the icon via css, or directly in the html? If via css, I would look down at the 'Using psuedo elements' section. Hope this helps.

Jonny Strange
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

I looked at the article thanx, but I still got a bit confussed