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 trialEhsan 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.
Ehsan Raza
263 PointsBasically 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
Unsubscribed User
8,838 PointsI have put together a few steps for you to follow.
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.
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.
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;
}
- 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;
}
- 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
263 PointsYep greatly answered much thanks :)
Oliver Sewell
16,425 PointsThanks max this really helped !
Sean T. Unwin
28,690 PointsDownload 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. :)
Unsubscribed User
8,838 PointsUnsubscribed User
8,838 PointsPlease explain what you are trying to do