title: Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?
body: <p>This is my HTML:</p>
  
  <pre><code>&lt;ul class="nav nav-pills nav-stacked custom-nav-pills"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;  Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now, the glyphicons which Bootstrap 3 uses are a certain size. I like the size, but I don't like the actual icons, so I decided to create my own custom icon. I then made this my CSS:</p>
  
  <pre><code>.glyphicon-home {
      content: url("custom-home-icon.png");
  }
  </code></pre>
  
  <p>Basically, all I did was change the image of the class. However, now when I view my .html page, my custom made home icon is really big compared to the other glyphicon (even though I didn't change the class - I just overrode the image -, which means the image should still have the same CSS / size right?).</p>
  
  <p>How do I make my custom home icon the same size as the other glyphicons?</p>