title: how to use icon fonts with bootstrap?
body: <p>i generated some font-based icons with the online tool icomoon, and am trying to use it with a bootstrap template i have.   </p>
  
  <p><strong>the problem</strong> is that bootstrap's css uses the "icon-" prefix,  and my icon-font uses the same, such as "icon-puzzle" for the css class name.</p>
  
  <p>here's a pic of what's happening (both my custom font (blue puzzle) is being rendered along with a section of the bootstrap icon spritesheet)
  <img src="https://i.stack.imgur.com/hMBPm.png" alt="enter image description here"></p>
  
  <p>so,  I certainly could change my icon font to use a different css class prefix, such as "font-icon-puzzle",  <strong>but I'd like to properly integrate with bootstrap instead of creating a one-off exception for my font icons.</strong>  </p>
  
  <p>Could someone please recommend an alternative that better integrates with bootstrap?</p>