Wie man ein Bootstrap 3 Glyphicon in einem HTML verwendet Wählen Sie

Ich muss eine Teilmenge der Bootstrap 3 Glyphicons in meinem ui durch den Benutzer auswählbar machen.Wie man ein Bootstrap 3 Glyphicon in einem HTML verwendet Wählen Sie

Ich versuchte dies:

<select class="form-control"> 
    <option><span class="glyphicon glyphicon-cutlery"></span></option> 
    <option><span class="glyphicon glyphicon-eye-open"></span></option> 
    <option><span class="glyphicon glyphicon-heart-empty"></span></option> 
    <option><span class="glyphicon glyphicon-leaf"></span></option> 
    <option><span class="glyphicon glyphicon-music"></span></option> 
    <option><span class="glyphicon glyphicon-send"></span></option> 
    <option><span class="glyphicon glyphicon-star"></span></option> 
</select>

aber alles, was ich bekommen sind Leerzeilen. Jede Hilfe oder alternative Vorschläge geschätzt.

Quelle

2013-10-08 JohnC

Ich glaube nicht, dass die Standard-HTML-Auswahl HTML-Inhalt anzeigen wird. Ich würde vorschlagen Bootstrap wählen: http://silviomoreto.github.io/bootstrap-select/

Es hat mehrere Optionen zum Anzeigen von Symbolen oder anderen HTML-Markup in der Auswahl. Hier

<select id="mySelect" data-show-icon="true"> 
    <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option> 
    <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option> 
</select>

ist eine Demo: https://www.codeply.com/go/l6ClKGBmLS

Quelle

2013-10-08 22:42:15 ZimSystem

Vielen Dank, der erste Teil beantwortet meine Frage, es ist technisch eine Schriftart in BS3, so denke ich, dass ich diesen Aspekt verfolgen würde davon, um zu sehen, ob ich eine reguläre Auswahl mit ihm als Schriftart arbeiten kann. Ihre Lösung zeigt technisch das Symbol in der Auswahl Dropdown-Liste, die es nicht in den Bearbeitungsbereich und ich bin besorgt, es wird nicht vollständig unterstützen BS3, da es scheint, dass Kontrolle vor-Termine bs3 und sie erwähnen sie nicht in ihrem docs darüber. – JohnC

Gern geschehen. Ich habe keine Erwähnung von BS 3 für Bootstrap Select entweder .. hoffentlich werden sie aktualisieren .. es ist ein großes Plugin – ZimSystem

der bootply.com scheint nach unten. Gibt es eine Möglichkeit, den Caret durch mein Symbol zu ersetzen? – Rubyrider

ich die Bootstrap-3 Dropdown-Button am Ende mit, ich meine Lösung hier im Fall der Veröffentlichung hilft es jemand in der Zukunft. Wenn Sie das Bootstrap 3 list-inline zur Klasse für die ul hinzufügen, wird es ebenfalls in einem sehr kompakten Format angezeigt.

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Select icon <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu list-inline" role="menu"> 
     <li><span class="glyphicon glyphicon-cutlery"></span></li> 
     <li><span class="glyphicon glyphicon-fire"></span></li> 
     <li><span class="glyphicon glyphicon-glass"></span></li> 
     <li><span class="glyphicon glyphicon-heart"></span></li>   
    </ul> 
</div>

Ich verwende Angularjs so ist dies der eigentliche Code, den ich verwendet:

<div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       Avatar <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu list-inline" role="menu"> 
       <li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)"> 
        <span ng-class="getAvatar(avatar)"></span> 
       </li> 
      </ul> 
     </div>

Und in meinem Controller:

$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud']; 

$scope.getAvatar=function(avatar){ 
    return 'glyphicon glyphicon-'+avatar; 
};

Quelle

2013-10-09 20:37:05 JohnC

Das hat mir bei der eckigen Version geholfen. Danke vielmals. :) –

Ähnlich funktioniert dieser Ansatz auch mit Ember/Lenkstangen. –

Meines Wissens der einzige Weg zu erreichen Dies wäre bei einer nativen Auswahl die Verwendung der Unicode-Darstellungen der Schriftart. Sie müssen die Glyphicon-Schriftart auf die Auswahl anwenden und sie daher nicht mit anderen Schriftarten mischen. Glyphicons enthalten jedoch normale Zeichen, sodass Sie Text hinzufügen können. Leider scheint das Einstellen der Schriftart für einzelne Optionen nicht möglich zu sein.

<select class="form-control glyphicon"> 
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option> 
    <option value="glyphicon-list-alt">&#xe032; Text</option> 
</select>

Hier ist eine Liste der Symbole mit ihrem Unicode:

http://glyphicons.bootstrapcheatsheets.com/

Quelle

2014-11-14 18:25:34 Someone

** Hinweis **: Dieser Trick funktioniert auch mit font-awesome glyphicons ' '. Verwenden Sie statt der Klasse 'glyphicon' die Klasse' fa'. Sie können die Liste der Unicode für die Symbole hier abrufen: http://fontawesome.io/cheatsheet/ –

Dies funktionierte teilweise mit BS 3.3.7. Zum Beispiel wird '& # x270f;' angezeigt, aber nicht '& # xe023;' oder '& # xe013;'. – Roland

Das Anwenden von 'glyphicon' auf'

Wie man ein Bootstrap 3 Glyphicon in einem HTML verwendet Wählen Sie

Antwort