twitter-bootstrap - bootstrap - font awesome

Cómo utilizar un glyphicon Bootstrap 3 en un html select

Question

Necesito hacer un subconjunto de los glifos Bootstrap 3 seleccionables en mi interfaz de usuario por el usuario.

Intenté esto:

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

Sin embargo, todo lo que obtengo son líneas en blanco. Cualquier ayuda o sugerencia alternativa apreciada.

Answer 1

No creo que la selección estándar de HTML muestre contenido HTML. Yo sugeriría revisar Bootstrap select: http://silviomoreto.github.io/bootstrap-select/

Tiene varias opciones para mostrar iconos u otras marcas HTML en la selección.

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

Aquí hay una demostración: https://www.codeply.com/go/l6ClKGBmLS

Answer 2

Que yo sepa, la única manera de lograr esto en una selección nativa sería utilizar las representaciones de unicode de la fuente. Tendrá que aplicar la fuente glyphicon a la selección y, como tal, no podrá mezclarla con otras fuentes. Sin embargo, los glifos incluyen caracteres regulares, por lo que puede agregar texto. Desafortunadamente, la configuración de la fuente para las opciones individuales no parece ser posible.

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

Aquí hay una lista de los iconos con su unicode:

http://glyphicons.bootstrapcheatsheets.com/

Answer 3

Si está utilizando el glyphicon como el primer carácter de la cadena, puede usar el html char (consulte https://glyphicons.bootstrapcheatsheets.com/ ) y luego aplique la fuente al primer carácter del elemento:

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

Answer 4

Terminé usando el botón desplegable bootstrap 3, estoy publicando mi solución aquí en caso de que ayude a alguien en el futuro. Agregar la lista en línea de bootstrap 3 a la clase para la ul hace que se muestre también en un formato muy compacto.

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

Estoy usando Angular.js, así que este es el código real que utilicé:

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

Y en mi mando:

$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;
};