CodePen

HTML

            
              <h1>
  *Everything is fixed now. :)
</h1>
<p>What am I completely overlooking? How can I set the font up to not<br /> have any of the whitespace above the actual icon? This is causing <br /> me a ton of alignment issues. Surely I'm just being silly.

  <h2>Text centering within line-height like usual</h2>
</p>

< -- This space is messing me up
<i class="icon-twitter"></i>
<i class="icon-facebook"></i>
<i class="icon-youtube"></i>
<i class="icon-rss"></i>
            
          
!

CSS

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

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


.icon-twitter:before {
    font-family: IconFont;
    content: '*';
    font-size: 100px;
    float: left;
    background: red;
    vertical-align: middle;
}
.icon-facebook:before {
    font-family: IconFont;
    content: '-';
    font-size: 100px;
    line-height: 100px;
    float: left;
    overflow: hidden;
    background: blue;
}
.icon-youtube:before {
    font-family: IconFont;
    content: ')';
    font-size: 100px;
    line-height: 150px;
    float: left;
    overflow: hidden;
    background: green;
}
.icon-rss:before {
    font-family: IconFont;
    content: '+';
    font-size: 100px;
    float: left;
    overflow: hidden;
    background: orange;
}

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 ..................