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/
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> Now I show the pretty camera!</option>
</select>
Sie können ein wenig schummeln und die Klasse auf die Option setzen:
<option class="icon-camera-retro"> Doesn't work in option!</option>
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.
Eine Lösung für Symbole, die in Chrome arbeiten, wurde zu einer ähnlichen Frage gegeben.
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
});