Header with icon that always stays same distance from text. Very useful for responsive designs.

index.html

<!-- Simply wrap your h1 with another div. This html is very semantic and doesnt add a unnecessary div
     tag just for the icon. As far as anyones concerned, no icon even exists according to this HTML. -->
<div class="header-container">
  <h1>Some Header Text Here</h1>
</div>

main.css

/**
 * header-container is responsible for assigning the width and centering the h1 text. You can choose
 * any width that you need or none at all if it wont effect your UI.
 */
.header-container {
  width: 100%;
  text-align: center;
}

/**
 * Added padding to expand the h1 element and position you background image accordingly. More details
 * in explanation below.
 */
.header-container h1 {
  display: inline-block;
  padding: 0 15px;
  background: url('/images/icon_location.png') no-repeat left center;
}

/**
 * Set the h1 as an inline-block element so that it does not take up the entire line. With inline-block,
 * we can also add as much padding the the h1 that we want. In this example I added it to both the
 * left and right but you could easily add padding only to the left or the right or even the top or
 * bottom. The amount of padding you will use depends on what size you icon image is. Add or decrese
 * padding based on what you need to see the icon image entirely.
 *
 * e.g
 * ---------------------------------------------------------------------
 * want an icon to the LEFT of the header text:
 *
 * .header-container h1 {
 *    display: inline-block;
 *    padding-left: 15px;
 *    background: url('/images/icon.png') no-repeat left center;
 *  } 
 *
 * want it on the RIGHT instead:
 *
 * .header-container h1 {
 *    display: inline-block;
 *    padding-right: 15px;
 *    background: url('/images/icon.png') no-repeat right center;
 *  } 
 *
 * want it ABOVE now:
 *
 * .header-container h1 {
 *    display: inline-block;
 *    padding-top: 15px;
 *    background: url('/images/icon.png') no-repeat center top;
 *  } 
 *
 * want it BELOW now:
 *
 * .header-container h1 {
 *    display: inline-block;
 *    padding-bottom: 15px;
 *    background: url('/images/icon.png') no-repeat center bottom;
 *  } 
 */