@font-face

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