it-swarm.com.de

Symbol in der Option - Bootstrap + Font-awesome

Ich versuche, ein Symbol in eine Option aus einer Auswahlliste einzubetten. Bei der Verwendung von Symbolen mit fantastischen Symbolen wird kein Symbol angezeigt.

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

Kann ich mit font-awesome das erreichen, was ich brauche? Oder muss ich mit font-awesome scrapieren und für jede Option einen manuellen CSS-Hintergrund erstellen?

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

18
Monokh

Sie können FontAwesome als Unicode-Schriftart verwenden und Ihre Symbole plattformübergreifend einfügen. Sie müssen nur den Unicode-Wert für jedes Symbol nachschlagen

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

Sie können ein wenig schummeln und die Klasse auf die Option setzen:

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

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

Offensichtlich ist Select2 ( http://ivaynberg.github.io/select2/ ) eine Lösung, um Symbole in Options-Tags einzufügen. Aber vielleicht, weil ich kein Wissen habe, konnte ich es einfach nicht schaffen. Am Ende habe ich auf Listen zurückgegriffen (ich habe auch Bootstrap verwendet)

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

Es gibt jedoch einen Nachteil, die ID der Liste muss eindeutig sein. Wenn Sie also wie ich 5 verschiedene Listen auf einer Seite hatten, müssen Sie alle in Javascript deklarieren (?), Um die Codes klobig zu machen.

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

Hoffe, dass die Hilfe etwas Licht bringt.

2
Jennift

Eine Lösung für Symbole, die in Chrome arbeiten, wurde zu einer ähnlichen Frage gegeben.

JSFiddle-Beispiel

Code verwendet:

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

Verwenden Sie ein Plugin wie select2

Hier ist eine funktionierende 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
Jeremy Lynch