Icons give the end user visual cues about the interface they are navigating. There are numerous studies and usability tests that reference the benefits of offering your end users visual cues. At Isos we have also encountered this through our usability testing. Users excel when given visual cues over plain text when navigating. Traditionally we would use raster images and shove them into the element to give it a visual reference… and we still can of course. In any of the examples below we can just as easily swap out the font icon for an image referenced either hard coded as a single image or via CSS as a single image or via CSS as a sprite reference. All classic ways of course and still valid, but as a common modern day (as of 2015) standard practice I’ll be pulling icons from an icon font.
There are a few gotchas to look out for with regards to your fonts being accessible and combating FOUT (Flash of Unstyled Text) that I encourage you to delve into and understand as well.
All of the code and examples below can be downloaded for your use and experimentation.
Let’s dive into a simple button with an icon. If we placed the icon style on the button itself the end result would display poorly and be undesirable, so we’ll put a span inside the button tags and after the button text in this instance. I say to put it after the button text out of convenience because we know we want the icon on the right side of the text, but we could just as easily place it on the left side of the button text and display it where we want it through CSS.

Example 1

Let’s put an icon on a simple button element. The result should look like this:
submit-example

<button class="button">
  Submit
  <span class="icon-arrow-right-circle"></span>
</button>

The CSS…

.button {
  background-color: #cf7200;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  margin: 10px auto;
  padding: 8px 18px 8px 18px;
  color: #ffffff;
  border: 0 solid #000000;
  font-size: 1.25em;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.6em;
}
.button:hover {
  background-color: #f29626;
}
span.icon-arrow-right-circle {
  margin: 1px 0 0 6px;
  float: right;
}

Live example:

And then another as a link button.

<a href="#" class="button">
  Submit
  <span class="icon-arrow-right-circle"></span>
</a>

Live example:
Submit


Example 2

Now that you have the gist of how this works, we’ll up the ante a bit and get a little creative with our iconified button. It comes down to utilizing multiple spans and the effect is one that leaves the end user with no doubt around the element’s purpose in one tight little package that should look like this:
wishlist-example

<a href="#" class="wish-list">
  <span class="icon-wish-list"></span>
  <span class="name-split-size-top">Wish</span>
  <span class="name-split-size">List</span>
</a>

The CSS…

.wish-list {
  color: #2C2C2C;
  text-decoration: none;
  background: #f5f5f5;
  font-size: 12px;
  width: 92px;
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 4px
}
.wish-list:hover {
  background: #f5f5f5;
  border: 1px solid #666666;
}
.wish-list span.icon-wish-list {
  font-size: 35px;
  float: left;
  margin: 8px 4px 4px 8px;
}
.wish-list span.name-split-size-top {
  display: block;
  float: left;
  text-align: left;
  width: 45px;
  margin-top: 8px;
}
.wish-list span.name-split-size {
  font-size: 18px;
  font-weight: bold;
  display: block;
  float: left;
  text-align: left;
  width: 45px;
}

Live example:
WishList


Example 3

Now we’ll put icons anywhere, elements within elements. This is an example of an application header with a link right aligned as well that should look like this:
header-example

<div class="header-title">
  <span class="icon-fire"></span>
  Featured Products
  <span class="show-all">
    <a href="#">Show All</a>
    <span class="icon-arrow-right"></span>
</span>
</div>

The CSS…

.header-title {
  background: #6c6c6c;
  color: #f9f9f9;
  padding: 8px;
  font-weight: bold;
  line-height: 1.6em;
}
.show-all {
  font-size: 14px;
  font-weight: normal;
  float: right;
  margin-right: 5px;
}
span.show-all a {
  color: #ffffff;
  text-decoration: none;
}
span.show-all a:hover {
  text-decoration: underline;
}
span.show-all span.icon-arrow-right {
  font-size: 9px;
  margin: 0 4px;
}

Live example:

Featured ProductsShow All

Conclusion

Icon anything you want. It takes just a little extra time and the end user will greatly benefit from your efforts. We have used both Icomoon and Fontastic and currently lean towards Fontastic to meet our icon font needs. It has proven repeatedly to be a slam dunk in our usability tests and I hope it offers you similar success.