Here is a step by step guide:
Go to Font Squirrel and download the @font-face kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.
Use this as your html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('fonts/modernpics-webfont.eot');
src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/modernpics-webfont.woff') format('woff'),
url('fonts/modernpics-webfont.ttf') format('truetype'),
url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
li {
list-style-type: none;
}
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
speak: none;
padding:0 5px;
}
</style>
</head>
<body>
<ul>
<li data-icon="^">RSS</li>
<li data-icon="*">Star</li>
<li data-icon=".">Shopping Cart</li>
</ul>
</body>
</html>
You should see this:
![Icon Font Example]()
You're rolling!
In addition, to know what character to use, check out the Character Map on the Font Squirrel site.
