CodePen

HTML

            
              <h1>
  Secondary font attempt
</h1>

<i class="icon-home"></i>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @font-face {
  font-family: 'IconFont';
  src: url('http://www.awfulmedia.com/demos/wp-content/themes/awfulmediav2/fonts-temp/icomoon.eot');
	 src: url('http://www.awfulmedia.com/demos/wp-content/themes/awfulmediav2/fonts-temp/icomoon.eot?#iefix') format('embedded-      opentype');
	 src: url('http://www.awfulmedia.com/demos/wp-content/themes/awfulmediav2/fonts-temp/icomoon.woff') format('woff');
  src: url('http://www.awfulmedia.com/demos/wp-content/themes/awfulmediav2/fonts-temp/icomoon.ttf') format('truetype');
}

[class^="icon-"]{
  font-family:IconFont;
  font-style:normal;
  display:inline;
  width:auto;
}


.icon-home:before {
    font-family: IconFont;
    content: '!';
    font-size: 100px;
    float: left;
    background: red;
}

h2 {
    line-height: 70px;
    background: red;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................