1

First of all: I've read this Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon "font" which helped me a bit so far but doesn't quite hit the mark for what I want to do.

So I want to add icons to my list boxes. Since I'm already using Bootstrap-select at the moment, I thought I should go with their option of adding glyphicons to each select field.

https://silviomoreto.github.io/bootstrap-select/examples/#icons

<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
</select>

This works fine with glyphicon Icons but I actually want to add my own icons that I can use there. Just adding an Icomoon icon set didn't work so far because the data-icon="glyphicon-xyz" probably still tries to find the icons in the bootstrap glyphicon file.

Can I somehow extend the list of glyphicons with my own ones or maybe replace it?

Any help would be appreciated.

Cheers

Edit: I also found this guide (https://www.sitepoint.com/customizing-bootstrap-icons-using-gulp/).

The author is talking about

@font-face {
  font-family: 'my-icons';
  src:url('fonts/my-icons.eot?-dp1fqh');
  /* other properties */
}

in the Glyphicon.less file but I have no experience with less and sass and my Bootstrap folder doesn't contain a glyphicons.less - I can only find the font face inside the regular bootstrap.css

Community
  • 1
  • 1
RubyOnSnakes
  • 13
  • 1
  • 5

1 Answers1

2

Are you typing the correct name of your icon? Each library of icons has their own naming convention, so if you create custom ones they will have a unique name.

The home icon for these three libraries:

font-awesome:fa fa-home

bootstrap: glyphicon glyphicon-home

icomoon: icon-home

Jaime Albarez
  • 61
  • 6
  • I guess I wasn't linking the icomoon lib correctly. Works now even without specifying which font library I want to use. – RubyOnSnakes Jun 13 '16 at 07:20