Bootstrap fügen Sie Glyphicon benutzerdefinierte Symbole für bootstrap-select

Question

Zunächst einmal: Ich habe diese Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon "font" gelesen, die mir bisher ein bisschen geholfen hat, aber nicht ganz das Ziel für das, was ich tun will.

Also ich möchte Symbole zu meinen Listenfeldern hinzufügen. Da ich momentan Bootstrap-select benutze, dachte ich mir, ich sollte mit der Option Glyphicons zu jedem Auswahlfeld hinzufügen.

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

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

Dies funktioniert mit glyphicon Icons in Ordnung, aber ich will eigentlich meine eigenen Symbole hinzufügen, dass ich es verwenden kann. Das Hinzufügen eines Icomoon-Icon-Sets funktionierte bisher nicht, da das Daten-Icon = "Glyphicon-xyz" wahrscheinlich immer noch versucht, die Icons in der Bootstrap-Glyphicon-Datei zu finden.

Kann ich die Liste der Glyphicons irgendwie durch meine eigenen erweitern oder vielleicht ersetzen?

Jede Hilfe wäre willkommen.

Prost

Edit: Ich fand auch diese Führung (https://www.sitepoint.com/customizing-bootstrap-icons-using-gulp/).

Der Autor spricht über

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

in der Glyphicon.less Datei, aber ich habe keine Erfahrung mit weniger und sass und mein Bootstrap-Ordner enthält keine glyphicons.less - Ich kann nur die Schrift finden Gesicht innerhalb der regulären bootstrap.css

Answer 1

Geben Sie den richtigen Namen Ihres Symbols ein? Jede Symbolbibliothek hat ihre eigene Namenskonvention. Wenn Sie also benutzerdefinierte Symbole erstellen, haben diese einen eindeutigen Namen.

Die home icon für diese drei Bibliotheken:

font-awesome:fa fa-home

Bootstrap:glyphicon glyphicon-home

icomoon:icon-home