it-swarm.com.de

So verwenden Sie ein Bootstrap 3-Glyphicon in einer HTML-Auswahl

Ich muss eine Untermenge der Bootstrap 3-Glyphicons in meiner Benutzeroberfläche vom Benutzer auswählbar machen.

Ich habe das versucht:

<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>

Ich bekomme jedoch nur leere Zeilen. Jede Hilfe oder alternative Vorschläge sind dankbar.

18
JohnC

Ich glaube nicht, dass die Standard-HTML-Auswahl HTML-Inhalte anzeigt. Ich schlage vor, Bootstrap select auszuprobieren: http://silviomoreto.github.io/bootstrap-select/

Es gibt mehrere Optionen zum Anzeigen von Symbolen oder anderen HTML-Markierungen im Auswahlbereich.

<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>

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

19
Zim

Am Ende habe ich die Bootstrap 3-Dropdown-Schaltfläche verwendet. Ich poste meine Lösung hier, falls sie in Zukunft jemandem hilft. Das Hinzufügen des Bootstrap 3 list-inline zur Klasse für das ul bewirkt, dass es auch in einem recht kompakten Format angezeigt wird.

<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 Angular.js, also ist dies der Code, den ich verwendet habe:

<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;
};
20
JohnC

Meines Wissens besteht der einzige Weg, dies in einer nativen Auswahl zu erreichen, in der Verwendung der Unicode-Darstellungen der Schrift. Sie müssen die Glyphicon-Schriftart auf die Auswahl anwenden und können sie daher nicht mit anderen Schriftarten mischen. Glyphicons enthalten jedoch reguläre Zeichen, sodass Sie Text hinzufügen können. Das Einstellen der Schriftart für einzelne Optionen scheint leider 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 eine Liste der Icons mit ihrem Unicode:

http://glyphicons.bootstrapcheatsheets.com/

19
Someone

Wenn Sie das Glyphicon als erstes Zeichen der Zeichenfolge verwenden, können Sie das HTML-Zeichen (siehe https://glyphicons.bootstrapcheatsheets.com/ ) verwenden und dann die Schrift auf das erste Zeichen des Elements anwenden:

    option::first-letter{
        font-family: Glyphicons Halflings;
    }
0
GGTT