How to implement custom icon font with CSS - html

Question

I'm wondering how to implement these icons using CSS.
Here is the CSS:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
...etc
And the HTML:
<div>
<i class="toc_icon"></i>Table of Contents
</div>
Any ideas?

Answer 1

The first thing you will need to do is import the font using #font-face in the CSS.
You will need the four major filetypes for the icons to have cross-browser functionality. These are eot ttf svg and woff. A good free resource for icon font sets is fontello.com:
#font-face {
font-family: 'spokeo';
src: url('path/to/spokeo.eot');
src: url('path/to/spokeo.eot?#iefix') format('embedded-opentype'),
url('path/to/spokeo.woff') format('woff'),
url('path/to/spokeo.ttf') format('truetype'),
url('path/to/spokeo.svg#spokeo') format('svg');
font-weight: normal;
font-style: normal;
}
The above imports the font to the browser for use later when you call the icons in your page.
You will now define the .icon class in the stylesheet like you did in your example:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
And then in your HTML you would write in the icon class as well as the specific class in your icon so that it includes all of the styles associated with all icons and then the specific icon contents, like this:
<div>
<i class="icon search_icon"></i>Search
<i class="icon down_arrow_icon"></i>Down
etc...
</div>

Answer 2

full code with working demo
jfFiddle
html
<div>
<i class="icon search_icon"></i> Search
</div>
<div>
<i class="icon down_arrow_icon"></i> Down Arrow
</div>
<div>
<i class="icon up_arrow_icon"></i> Up Arrow
</div>
css
#font-face {
font-family: 'spokeo';
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot');
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
div {
margin-bottom: 5px;
}
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before {
content: '\e003';
}
.down_arrow_icon:before {
content: '\e094';
}
.up_arrow_icon:before {
content: '\e093';
}