Frequently Asked Questions

How do I install Icon-Works?

Your download contains TTF, EOT, WOFF, and SVG font files.

You can install the TTF font for desktop use, as the remaining files are formats for using fonts on the Web.

How to embedd as @font-face on the Web?

*You may need to adjust the paths below.

  1. Include the declaration of the font on your CSS file:

    @font-face {
    	font-family: 'icon-worksregular';
    	src: url('icon-works-webfont.eot');
    	src: url('icon-works-webfont.eot?#iefix') format('embedded-opentype'),
    		url('icon-works-webfont.woff') format('woff'),
    		url('icon-works-webfont.ttf') format('truetype'),
    		url('icon-works-webfont.svg#icon-worksregular') format('svg');
    	font-weight: normal;
    	font-style: normal;
    
    }
    

  2. Include the stylesheet in your HTML <head>:

    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    

  3. Include the icons on your HTML or CSS:

    Recommended way: Use the CSS content:before and data-icon attribute

    <span class="iconworks" data-icon="&#96;"></span>
    

    .iconworks:before 
    	{
    		content: attr(data-icon);
    		font-family:icon-worksregular;
    	}
    

    You can also embed Icon-works directly in the HTML, though this will affect negatively, the semantic value of your code.

Is there a list of the icons?

Yes, you can find it in your download. Alternatively, you can also get the poster (Unicode entities are included above each glyph).