title: Hoverable nav icons
body: <p>I am trying to do an icon navbar where on hover the icon also hovers the same colour, I have the icon sort of positioned but at the same time I can't push it to the right or it disappears.</p>
  
  <p>The main goal is pretty much put the icon to the left of the a href with about 3px of padding of the right so it's not touched the text and on the nav menu hover the icon hovers the same colour as the text for each nav item.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;nav class="fixed-nav-bar"&gt;
      &lt;div id="menu" class="menu"&gt;
        &lt;a class="show" href="#menu"&gt;Menu&lt;/a&gt;&lt;a class="hide" href="#hidemenu"&gt;Menu&lt;/a&gt;
        &lt;ul class="menu-items"&gt;
          &lt;li&gt;&lt;div class="fa-icon-home"&gt;&lt;/div&gt;&lt;a href="javascript:ajaxpage('pages/home.php', 'primaryContent');"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:ajaxpage('pages/about.php', 'primaryContent');"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:ajaxpage('pages/about.php', 'primaryContent');"&gt;DESIGNS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:ajaxpage('pages/about.php', 'primaryContent');"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.fa-icon-home {
      background-image: url('../img/home.png');
      background-repeat: no-repeat;
      height: 22px;
      position: relative;
      top: 15px;
      right: 10px;
  }
  .fixed-nav-bar {
      position: fixed;
      width: 100%;
      background-color: #3f3f3f;
  }
  .fixed-nav-bar li, .fixed-nav-bar a {
      line-height: 70px;
      width: 100px;
      max-width: 120px;
  }
  .menu {
      width: 90%;
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
  }
  .menu a, .menu a:visited {
      color: #ffffff;
      overflow: hidden;
      font-size: 20px;
  }
  .menu a:hover, .menu a:target {
      display: block;
      color: #72BCD4;
  }
  .menu-items {
      display: inline-block;
  }
  .menu-items li {
      display: inline-block;
      border-top: 2px solid transparent;
  }
  .menu-items a {
      text-decoration: none;
      display: block; /* New Line */
  }
  .menu-items li:hover {
      border-top: 2px solid #72BCD4;
  }
  .show, .hide {
      display: none;
      padding-left: 15px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center left;
      color: #dde1e2;
  }
  .show {
      background-image: url(../assets/down-arrow-icon.png);
  }
  .hide {
      background-image: url(../assets/up-arrow-icon.png);
  }
  </code></pre>