A CodePen by Aaron Barker. Icon font uses - Using an icon font as a prefix and an icon, with styling and without. Oh, and keep it accessible by keeping the text available when an icon.

index.html

<p>What's the best way to make an icon font based prefix and icon (no text) that doesn't require extra markup and is accessible (leaves text in place)? This is my current solution, and here is the <a href="http://codepen.io/aaronbarker/pen/oCbIx">journey I took to get here</a>. Below are examples as regular text and as buttons with border/padding. I found that different width glyphs introduced issues, so I have a normal, wide and thin, example of each below to make sure all is working correctly.</p>

<p>The one thing I don't like about this solution is the need for the 1em height (and associated box-sizing:content-box) on the icon version, this is requried to hide the text. Would love any alternatives.</p>

<p><a href="http://css-tricks.com/html-for-icon-font-usage/">Chris Coyier mentions</a> that Voice Over (on a mac) will read "HTML Content" when you use only a pseudo element as I have here. It doesn't appear to be doing so for me. I've emailed back and forth with him and he has thrown up a <a href="http://css-tricks.com/examples/PseudoIconTest/">new test</a> testing the PUA better.  Oddly it still says something within headings, but an <a href="http://codepen.io/aaronbarker/full/wIbos">additional test</a> of mine shows that it doesn't say something inside other elements.</p>

<p><span>Text</span> - <span class="icon-check">As a prefix</span> - <span class="icon-check icon">Longname as icon</span></p>
<div class="bigger">
  <p><span>Text</span> - <span class="icon-check">As a prefix</span> - <span class="icon-check icon">Longname as icon</span></p>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-check">As a prefix</span> - <span class="icon-check icon">Longname as icon</span></p>
  </div>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-arrow">As a prefix</span> - <span class="icon-arrow icon">Longname as icon</span></p>
  </div>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-arrow2">As a prefix</span> - <span class="icon-arrow2 icon">Longname as icon</span></p>
  </div>
</div>
<h3>Buttons</h3>
<p>This is for testing padding added.</p>
<p><a class="btn" href="#d">Text</a> - <a class="btn icon-check" href="#d">As a prefix</a> - <a class="btn icon-check icon" href="#d">Longname as icon</a></p>

<div class="bigger">
  <p><a class="btn" href="#d">Text</a> - <a class="btn icon-check" href="#d">As a prefix</a> - <a class="btn icon-check icon" href="#d">Longname as icon</a></p>
  <div class="bigger">
    <p><a class="btn" href="#d">Text</a> - <a class="btn icon-check" href="#d">As a prefix</a> - <a class="btn icon-check icon" href="#d">Longname as icon</a></p>
  </div>
  <div class="bigger">
    <p><a class="btn" href="#d">Text</a> - <a class="btn icon-arrow" href="#d">As a prefix</a> - <a class="btn icon-arrow icon" href="#d">Longname as icon</a></p>
  </div>
  <div class="bigger">
    <p><a class="btn" href="#d">Text</a> - <a class="btn icon-arrow2" href="#d">As a prefix</a> - <a class="btn icon-arrow2 icon" href="#d">Longname as icon</a></p>
  </div>
</div>

style.css

/*now to the specifics, much of this figured out in another pen at http://codepen.io/aaronbarker/pen/oCbIx */
[class^="icon-"],
[class*=" icon-"]{
  display:inline-block;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
/*  display: inline-block;*/
  margin-right:.2em; /*this is just spacing between icon and text*/
/*  vertical-align:-5%;*/
  line-height:1;
  font-family:FontAwesome;
}
.icon {
  /*indent can't be 100% thanks to IE*/
  overflow:hidden;
  letter-spacing:-99px; /* text-indent caused problems, reverse letter-spacing reverses the text so they don't take up space. doesn't affect the icon since it is a single letter */
/*  needs to be content box so that height:1em will allow padding/border*/
  -moz-box-sizing:content-box;
  box-sizing:content-box;
  line-height:1;
  font-family:FontAwesome;
  height:1em; /*hidden text is wrapped below the icon, this (with overflow:hidden) hides it*/
  vertical-align:bottom; /*fixes a vertical alignment issue seen in all browsers due to the icon being display:block, which is needs to be*/
}
.icon:before {
  margin-right:0; /*fixes the spacing between icon and text for regular version*/
  display:block;
  letter-spacing:0;
  margin-bottom:1em; /* adds some space below the icon so wrapped word isn't seen when there is lots of padding */
}



/*target firefox only, the only one to have problems*/
@-moz-document url-prefix(){
  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    vertical-align:-10%;
  }
  .icon {
    vertical-align:middle;
  }
}

/*loading a font, not critical to the logic here */
@font-face {
  font-family: 'FontAwesome';
  src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot?v=3.2.0');
  src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot?#iefix&v=3.2.0') format('embedded-opentype'), 
      url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.woff?v=3.2.0') format('woff'), 
      url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.ttf?v=3.2.0') format('truetype'),
      url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.0') format('svg');
}

/* below here is styling to make the page pretty or functional (backgrounds to see icon elem, etc)*/
*{
  box-sizing: border-box;
  -moz-box-sizing:border-box;
}
body {
  padding:0 140px;
  font-size:1em;
  line-height:1em;
  font-family:helvetica;
}
.icon-check:before {
  /*trashcan*/
  content:"\f014";
}
.icon-arrow:before {
  /*left arrow*/
/*  content:"\f177";*/
  /*right arrow*/
/*  content:"\f178";*/
  /*double arrow*/
  content:"\f07e"; 
}
.icon-arrow2:before {
  /*left arrow*/
/*  content:"\f177";*/
  /*right arrow*/
/*  content:"\f178";*/
  /*double arrow*/
  content:"\f176"; 
}
/*simple styles to see some stuff*/
span {
  border:1px solid blue;
}
.bigger {
  font-size:150%;
}
.btn{
  background:#ddd;
  border:1px solid green;
  padding:.3em .8em;
  font-size:inherit;
  display:inline-block;
  line-height:100%;
  /*overflow:visible;*/
  text-decoration:none;
}
[class^="icon-"]:before,
[class*=" icon-"]:before{
  background:rgba(0,255,0,.3);
}