如何在HTML select中使用Bootstrap 3 glyphicon [英] How to use a Bootstrap 3 glyphicon in an html select

问题描述

我需要让用户在用户界面中选择Bootstrap 3字形的子集.

I need to make a subset of the Bootstrap 3 glyphicons selectable in my ui by the user.

我尝试过:

<select class="form-control">
  <option><span class="glyphicon glyphicon-cutlery"></span></option>
  <option><span class="glyphicon glyphicon-eye-open"></span></option> 
  <option><span class="glyphicon glyphicon-heart-empty"></span></option>
  <option><span class="glyphicon glyphicon-leaf"></span></option>
  <option><span class="glyphicon glyphicon-music"></span></option>
  <option><span class="glyphicon glyphicon-send"></span></option>
  <option><span class="glyphicon glyphicon-star"></span></option>
</select>

但是我得到的只是空白行.任何帮助或其他建议表示赞赏.

However all I get are blank lines. Any help or alternative suggestions appreciated.

推荐答案

我认为标准的HTML选择不会显示HTML内容.我建议您检查Bootstrap选择: http://silviomoreto.github.io/bootstrap-select/

I don't think the standard HTML select will display HTML content. I'd suggest checking out Bootstrap select: http://silviomoreto.github.io/bootstrap-select/

它具有多个选项，用于在选择项中显示图标或其他HTML标记.

It has several options for displaying icons or other HTML markup in the select.

<select id="mySelect" data-show-icon="true">
  <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
  <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>

这是一个演示: https://www.codeply.com/go/l6ClKGBmLS

这篇关于如何在HTML select中使用Bootstrap 3 glyphicon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！