2013-05-13 21 views
18

Próbuję osadzić ikonę w opcji z listy wyboru. Dzięki ikonom z fontami nie wyświetla się żadna ikona.Ikona w opcji - Bootstrap + Font-awsome

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

Czy mogę użyć czcionki-awesome, aby osiągnąć to, czego potrzebuję? Czy muszę używać złomu czcionek i ręcznie obsługiwać tło CSS dla każdej opcji?

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

+1

myślę, że jest bardziej proste rozwiązania, ale można spojrzeć na to niesamowite pluginy jquery: http://ivaynberg.github.io/select2/ index.html, część szablonowa może Cię zainteresować. – Getz

+0

Sprawdź ten http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list – PSL

+0

@ PSL Faktycznie zobaczyłem, że zanim napisałem to, dlaczego wspomniałem "ręczne tło CSS dla każda opcja ", ale wolałbym korzystać z frameworka font-awesome. – Monokh

Odpowiedz

5

można oszukać trochę i umieścić klasę na opcję:

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

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

To nie działa tutaj ... Korzystanie z Chrome 26 – Getz

+2

Tak, masz rację. Zapukałem to w Firefoksie i działa tam, ale nie w Chrome. Ach tak. –

+0

Dzięki za rozwiązanie, próbowałem tego w oryginalnym chromie i uważałem, że nie działa, ale potrzebowałoby rozwiązania opartego na przeglądarce. Myślę, że muszę przejść do prostego obrazu tła. – Monokh

2

Widocznie Select2 (http://ivaynberg.github.io/select2/) jest rozwiązaniem na umieszczenie ikony w opcji tagi. Być może jednak z powodu mojego braku wiedzy po prostu nie mogłem tego zrobić. W końcu uciekają się do korzystania z list (ja również za pomocą 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> 

Jest wadą jednak, id listy musi być unikalna. Tak więc, tak jak ja miałeś 5 różnych list na jednej stronie, musisz zadeklarować (?) Wszystkie z nich w javascript, czyniąc kody grube.

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

Mam nadzieję, że pomoc rzuci trochę światła.

+0

niedawno znalazł sposób na umieszczenie ikon w tagach

19

Możesz użyć FontAwesome jako czcionki Unicode i wstawić ikony w sposób międzyplatformowy. Wystarczy spojrzeć w górę wartość Unicode dla każdej ikony

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

Nie działa w Chrome, Safari i Operze (komputery Mac) [JSFiddle] (http: // jsfiddle .net/PageLab/y49pd /) –

+0

Nie mam komputera Mac, ale powinien działać.Czy ktoś może to potwierdzić? – Sanojian

+0

Na komputerze Mac działa tylko w Firefoksie. To jest śledzone w [Github] (https://github.com/FortAwesome/Font-Awesome/issues/996) również: –

0

pomocą wtyczki jak select2

Oto pracuje 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> 
+0

Nie działa w Chrome (v49) – GavKilbride

+0

Nie działa w przeglądarce Chrome 49 na komputerze Mac. –

0

rozwiązanie dla ikon pracujących w Chrome nadano on a similar question .

JSFiddle Example

kod używany:

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