带有fontawesome图标的Html下拉列表

时间:2018-05-23 11:53:00

标签: javascript php html font-awesome dropdown

我有什么: 像这样的html下拉列表:

<select name="faDropdown" class="form-control"> <option value="1">Select an icon</option> </select>

我想要的是什么: 下拉列表中充满了fontawesome图标。 (不像<option value="fa fa-icon"></option>那样硬编码,因为我不想在我的下拉列表中像100个不同的图标那样进行硬编码。

我不知道是否有解决方案,所以任何帮助都会很棒:)

2 个答案:

答案 0 :(得分:1)

你想使用香草JS吗?您可以尝试此示例,但它的工作方式取决于您希望如何使用它。无论如何,你需要对数组中的图标进行硬编码。

如果您有问题请说明您想要放置此代码的位置。

&#13;
&#13;
var select = document.getElementsByClassName('form-control')[0];
var icons = ['fa-icon', 'fa-icon2', 'fa-icon3'];

for (var i = 0; i < icons.length; i++){
    var opt = document.createElement('option');
    opt.value = `fa ${icons[i]}`;
    opt.innerHTML = opt.value;
    select.appendChild(opt);
}
&#13;
<select name="faDropdown" class="form-control">
  <option value="1">Select an icon</option>
</select>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我猜你能做到吗?

("&#xf0c1;" is just an example of a fontawesome icon).

<select name="faDropdown" class="form-control fa">
<option value="1">&#xf0c1;</option>
</select>