发表新帖
发表新帖

Icon in option - Bootstrap + Font-awsome

前端 未结
关注
5 614
花落未央
花落未央 2020-12-31 03:15

I am trying to embed an icon in an option from a select list. Using font-awesome icons, no icon is being displayed.
提交评论
  •  加载中...
  • 南笙
    2020-12-31 03:48

    You can use FontAwesome as a unicode font and insert your icons in a cross-platform way. You just need to look up the unicode value for each icon

    <select style="font-family: 'FontAwesome', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>
    0 讨论(0)
  • 臣服心动
    2020-12-31 03:50

    Use a plugin like select2

    Here's a working 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 讨论(0)
  • 栀梦
    2020-12-31 03:51

    You can cheat a little bit and put the class on the option:

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

    <option class="icon-camera-retro"> Doesn't work in option!</option>
    0 讨论(0)
  • 北恋
    2020-12-31 03:58

    Apparently Select2 (http://ivaynberg.github.io/select2/) is a solution to putting icons in option tags. However, perhaps due to my lack of knowledge, I just couldn't make it work. In the end I resorted to using lists (I was also using 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>

    There is a drawback though, the id of the list has to be unique. So, if like me you had 5 different lists in one page, you have to declare (?) all of them in javascript making the codes chunky.

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

    Hope that help shed some light.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题