选择选项中的字体真棒图标

Question

我尝试在几个选项的第一个选择中添加一个 插入符号图标，如下图所示：

这是我的例子的 小提琴。点击预览

我无法在上面的小提琴上看到图标。

以及对应的代码：

 .wrapper {
  height: 200px;
  background-color: red;
  padding-top: 100px;
  padding-left: 150px;
}
#before-select {
  font-size: 30px;
  color: #ffffff;
}
select {
  border: none;
  background: transparent;
  /*background-color: blue;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 180px;
  padding-top: 0px;
  background-size: 20px;
  color: #ffffff;
  font-size: 30px;
}
select option {
  color: #424146;
  background: #ffffff;
}

 <link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="wrapper">

  <form role="form">
    <span id="before-select">in</span>

    <select name="town">
      <option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
      </option>
      <option value="Paris">Paris</option>
      <option value="Madrid">Madrid</option>
    </select>

  </form>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

原文由 michltm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在 i option ，因为标签已被剥离。

但是你可以 像这样 在 select 之后添加它点击预览

原文由 Vincent G 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以简单地将 FontAwesome 图标作为文本添加到您的选择下拉列表中。你只需要 CSS 中的一些东西，FontAwesome CSS 和 unicode。例如  ：

 select {
  font-family: 'FontAwesome', 'Second Font name'
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option>Hi, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>

工作小提琴点击预览

单击图标可以找到 Unicode： Fontawesome

根据下面的评论和 Github 上的问题，选择元素中的 Unicode 不适用于 OSX（目前）。

---

更新：从 Github 问题 中，将 multiple 属性添加到 select 元素使其适用于：

OSX El Capitan 10.11.4

• Chrome 版本 50.0.2661.75（64 位）
• Safari 版本 9.1
• 火狐版本 45.0.2

 select{
  font-family: FontAwesome, sans-serif;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select multiple>
  <option>&#xf26e 500px</option>
  <option>&#xf042 Adjust</option>
  <option>&#xf170 Adn</option>
  <option>&#xf037 Align-center</option>
  <option>&#xf039 Align-justify</option>
  <option>&#xf036 Align-left</option>
  <option>&#xf038 Align-right</option>
</select>

JSFiddle点击预览

原文由 node_modules 发布，翻译遵循 CC BY-SA 4.0 许可协议