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 Layout Techniques Flexbox Layout Animating Flexbox

Ehsan Raza
Ehsan Raza
263 Points

@font-face

I spent like good 2 hours but i'm almost given up on this. Can anyone tell me how to download these icons and how i can get to use them correctly.

Please explain what you are trying to do

Ehsan Raza
Ehsan Raza
263 Points

Basically i'm following a tutorial on @font-face which uses icomoon icons. How do i download these icons and what format to use for them?

2 Answers

I have put together a few steps for you to follow.

  1. Go to IcoMoon and select the icons you want, you then need to click on the generate font button in the corner. Once you have done this click on the download button where the generate font button used to be. This will download a file called icomoon.zip file.

  2. Extract the .zip file and open the Folder. Inside this folder will be another folder called font inside the folder will be 4 files. The files should be icomoon.eot, icomoon.svg, icomoon.woff and icomoon.ttf, It doesn't matter if the file names are different, as long as the endings are the same you'll be fine. Drag the 4 files over to your project directory.

  3. Go into your CSS file and copy this code, replacing your-(file ending)-file-directory with the directory to the .eot, .svg, .woff or .ttf files.

@font-face {font-family:
    'RaphaelIcons';
    src:
    url('your-eot-file-directory.eot');
    src:
    local('☺'), url('your-woff-file-directory.woff') format('woff'), url('your-ttf-file-directory.ttf') format('truetype'), url('your-svg-file-directory.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
  1. This code enables you to use the font anywhere inside your css or html <style> tags if the file is included. The next part is to put this following code into your CSS file. This code is a CSS class and you should add this to any icon you need.
.icon {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'IcoMoon';
    font-size: 1.1em;
    position: relative;
    top: 0.1em;
    display: inline;
}
  1. Now how to use them. Go into your .html file and make a <span> tag with the class Icon.
<span class="icon">(Ascii code)</span>

Replace Ascii code with the code you find when you hover over the icon you want on IcoMoon from your font and click get code. Copy the HTML Entity and paste it in your <span>

I hope this helps explain things!

Max

Ehsan Raza
Ehsan Raza
263 Points

Yep greatly answered much thanks :)

Oliver Sewell
Oliver Sewell
16,425 Points

Thanks max this really helped !

Sean T. Unwin
Sean T. Unwin
28,690 Points

Download the project files. Inside there are folders named start and final. Inside each of those is a folder named, fonts; they are in there. At the beginning of the video Guil shows how to use the fonts in your CSS.

Unzip the project files, then go to the start folder, open the style.css, which is inside the css folder, and follow along with the video.

Good luck and happy learning. :)