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

Jonny Strange
6,412 PointsIcoMoon 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
28,149 PointsWhat 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";
}

Emma Willmann
Treehouse Project ReviewerI 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
6,412 PointsI looked at the article thanx, but I still got a bit confussed
Jonny Strange
6,412 PointsJonny Strange
6,412 PointsCSS
/***************************************************************** 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>
<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
28,149 PointsKevin Korte
28,149 PointsSorry 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
28,149 PointsKevin Korte
28,149 PointsI 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