A Pen by Aaron Barker.

Icon-font-using-before-for-icon.markdown

Icon font using before for icon

Trying to find a good structure for doing icon fonts that can easily support icons and prefixes. Versions I see use extra markup, or when doing icons don't have the text which is bad for accessibility.

This version is attempting to use the before element as the icon

A Pen by Aaron Barker on CodePen.

License.

index.html

<p>This is yet another attempt to make icons work with as little markup change as possible. Many attempts have failed, but suprisingly this one works using display:inline-table</p>

<h3>Narrow Icon</h3>
<p><span>Text</span> - <span class="icon-narrow">As a prefix</span> - <span class="icon-narrow icon--icon">Longname as icon</span></p>
<p><span>Text</span> - <span class="icon-wide">As a prefix</span> - <span class="icon-wide icon--icon">Longname as icon</span></p>
<div class="bigger">
  <p><span>Text</span> - <span class="icon-narrow">As a prefix</span> - <span class="icon-narrow icon--icon">Longname as icon</span></p>
  <p><span>Text</span> - <span class="icon-wide">As a prefix</span> - <span class="icon-wide icon--icon">Longname as icon</span></p>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-narrow">As a prefix</span> - <span class="icon-narrow icon--icon">Longname as icon</span></p>
    <p><span>Text</span> - <span class="icon-wide">As a prefix</span> - <span class="icon-wide icon--icon">Longname as icon</span></p>
  </div>
</div>
<h3>Buttons</h3>
<p>This is for testing padding added.</p>
<p><a class="btn">Text</a> - <a class="btn icon-narrow">As a prefix</a> - <a class="btn icon-narrow icon--icon">Longname as icon</a></p>
<p><a class="btn">Text</a> - <a class="btn icon-wide">As a prefix</a> - <a class="btn icon-wide icon--icon">Longname as icon</a></p>

<div class="bigger">
  <p><a class="btn">Text</a> - <a class="btn icon-narrow">As a prefix</a> - <a class="btn icon-narrow icon--icon">Longname as icon</a></p>
  <p><a class="btn">Text</a> - <a class="btn icon-wide">As a prefix</a> - <a class="btn icon-wide icon--icon">Longname as icon</a></p>
  <div class="bigger">
    <p><a class="btn">Text</a> - <a class="btn icon-narrow">As a prefix</a> - <a class="btn icon-narrow icon--icon">Longname as icon</a></p>
    <p><a class="btn">Text</a> - <a class="btn icon-wide">As a prefix</a> - <a class="btn icon-wide icon--icon">Longname as icon</a></p>
  </div>
</div>

script.js

/*
icon attempts
- making the before display:inline makes the no padding version slick, but shows up within the padding on the buttons
*/

style.scss

$site__font__family--icon: FontAwesome;
$site__spacing--primary: 20px;
/**************************************
icon font pattern
**************************************/
$iconfont__font__family: $site__font__family--icon;
$iconfont__spacing--between:.2em;
$iconfont__spacing--between-vertical:$site__spacing--primary;

$icon-classname: "icon";
$block: ".#{$icon-classname}";

// Quite a bit of digging has gone into the code below. See the following codepen for examples and history: http://codepen.io/aaronbarker/pen/FfgJd
// it is encouraged to put the declaration of icons (which glyph goes with which icon) and icon specific tweaks in another section, so that the core icon logic and the specifcs are separated. Not required, but encouraged.

[class^="#{$icon-classname}-"],
[class*=" #{$icon-classname}-"]{
  display:inline-block;
}

[class^="#{$icon-classname}-"]:before,
[class*=" #{$icon-classname}-"]:before {
	margin-right:$iconfont__spacing--between; /*this is just spacing between icon and text*/
	line-height:1;
	font-family:$iconfont__font__family;
}
// show it only as an icon (hide the text)
#{$block}--icon {
	/* indent can't be 100% thanks to IE */
	overflow:hidden;
  text-indent:-10em;
	vertical-align:bottom; /*fixes a vertical alignment issue seen in all browsers due to the icon being display:block, which it needs to be*/
  white-space:nowrap;
  display:inline-table;
  font-family:$site__font__family--icon; // have to put on the parent due to an IE bug https://connect.microsoft.com/IE/feedback/details/796188/pseudo-element-display-table-cell-font-ignored
	&:before {
		margin-right:0; /*fixes the spacing between icon and text for regular version*/
		display:table-cell;
		text-indent:0;
		margin-bottom:1em; /* adds some space below the icon so wrapped word isn't seen when there is lots of padding */
	}

	#{$block}--suffix:before {
		float:right;
		margin-right:0;
		margin-left:$iconfont__spacing--between;
	}
}

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


/*General stuff, not specific to this solution*/
*{
  box-sizing: border-box;
  -moz-box-sizing:border-box;
}
body {
  padding:0 140px;
  font-size:1em;
  line-height:1em
}
@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');
  font-weight: normal;
	font-style: normal;
}
/*.icon.icon-search:after,*/
.icon-narrow:before {
	content:"\f176";
}
.icon-wide:before {
	content:"\f07e";
}
 
/*simple styles to see some stuff*/
span {
  border:1px solid rgba(0,0,255,.1);
}
.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;*/
}
[class^="icon-"]:before,
[class*=" icon-"]:before,
[class^="icon-"]:after,
[class*=" icon-"]:after{
  background:rgba(0,255,0,.3);
}