1

i generated some font-based icons with the online tool icomoon, and am trying to use it with a bootstrap template i have.

the problem 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.

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) enter image description here

so, I certainly could change my icon font to use a different css class prefix, such as "font-icon-puzzle", but I'd like to properly integrate with bootstrap instead of creating a one-off exception for my font icons.

Could someone please recommend an alternative that better integrates with bootstrap?

JasonS
  • 7,443
  • 5
  • 41
  • 61

1 Answers1

0

Font Awesome is what I use with Bootstrap and it works great:

http://fortawesome.github.com/Font-Awesome/

In order to get your custom fonts working with Bootstrap make sure you're loading your css after the Boostrap css and make sure your css states "background-image:none" in it.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • Reason for downvoting: typo in the URL and also don't send me to another page... if you're writing an answer then explain in it the steps that must be followed. – Marcel Popescu Jun 29 '23 at 06:45