html - old - Icono en opción-Bootstrap+Font-awsome

font awesome viejo

Question

Estoy tratando de incrustar un icono en una opción de una lista de selección. Usando iconos de fuentes impresionantes, no se muestra ningún icono.

<select>
    <option><i class="icon-camera-retro"></i> Doesn''t work in option!</option>
</select>

¿Puedo usar font-awesome para lograr lo que necesito? ¿O tengo que descartar usando tipografía impresionante y hacer un fondo CSS manual para cada opción?

JSFiddle: http://jsfiddle.net/mmXh2/1/

Answer 1

Al parecer, Select2 ( http://ivaynberg.github.io/select2/ ) es una solución para poner iconos en las etiquetas de opción. Sin embargo, tal vez debido a mi falta de conocimiento, simplemente no pude hacer que funcionara. Al final, recurrí al uso de listas (también estaba usando Bootstrap)

<a class="btn dropdown-toggle category" data-toggle="dropdown" href="#">All Categories <span class="caret pull-right"></span></a>
<ul id="category" class="dropdown-menu">
    <li><a href="#"><i class="icon"></i> Category A</a></li>
    <li><a href="#"><i class="icon"></i> Category B</a></li>
    ..
</ul>

Sin embargo, hay un inconveniente, el ID de la lista tiene que ser único. Entonces, si como yo tuviste 5 listas diferentes en una página, tienes que declarar (?) Todas ellas en javascript haciendo que los códigos sean gruesos.

$(function(){
  $("#category li a").click(function(){
    $(".category").val($(this).text());
  });
});

Espero que la ayuda arroje algo de luz.

Answer 2

Puede usar FontAwesome como una fuente Unicode e insertar sus iconos de forma multiplataforma. Solo necesitas buscar el valor Unicode para cada ícono

<select style="font-family: ''FontAwesome'', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>

Answer 3

Puedes hacer un poco de trampa y poner a la clase en la opción:

http://jsfiddle.net/mmXh2/2/

<option class="icon-camera-retro"> Doesn''t work in option!</option>

Answer 4

Se ha dado una solución para los iconos que trabajan en Chrome en una pregunta similar .

Ejemplo de JSFiddle

Código utilizado:

function format(icon) {
    var originalOption = icon.element;
    return ''<i class="fa '' + $(originalOption).data(''icon'') + ''"></i> '' + icon.text;
}
$(''.wpmse_select2'').select2({
    width: "100%",
    formatResult: format
});

Answer 5

Usa un plugin como http://ivaynberg.github.io/select2/

Aquí hay un jsfiddle trabajo jsfiddle

<select id="icon_select" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option>
  <option value="fa-music">&amp;#xf001; fa-music</option>
</select>