显示哈希图标的下拉选项中的 Font-Awesome Unicode 图标答案

【问题标题】：Font-Awesome Unicode Icon in Dropdown Option showing Hash Icon显示哈希图标的下拉选项中的 Font-Awesome Unicode 图标
【发布时间】：2018-06-07 10:14:07
【问题描述】：

（一般问题：需要在下拉项中显示彩色图标（正方形）。颜色是动态确定的，形状始终是正方形。如果有更好的解决方案，请告诉我）

我需要在下拉菜单中显示图标，但很难在其中放置图像（并且您不能将 I-tag 放在选项内），所以我使用添加 Font-Awesome (FA) 的解决方法Unicode 图像。

我需要在每个选项中添加“fa-square”，如下所示。根据下面的代码是

f0c8     -> &#xf0c8;

http://fontawesome.io/icon/square/

我的选项值是从数组中动态生成的，我追加如下：

$.each(items, function(i, item) {
    $('#dropdown').append($('<option></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle));
});

但无论我做什么，Firefox 都会显示以下哈希图像。我尝试过的事情：

1) 使 Select 具有 Font-Awesome 字体系列

<select id="dropdown" style="font-family: 'Font-Awesome'">

（这是这里的建议，https://github.com/FortAwesome/Font-Awesome/issues/996）

2) 使选项具有所有选项的fa 类

$('#dropdown').append($('<option class="fa"></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle));

Font-Awesome CSS 已加载并在项目中可用。有什么想法吗？

【问题讨论】：

您应该使用font-family: 'FontAwesome' ...您特别链接到的文章还指出，在<select> 输入法中，所尝试的功能是不可能的。
那么在我描述的下拉列表中显示多色框的解决方案是什么？有什么解决办法吗？
您可以只使用单色图标；您链接到的文章显示了它是如何工作的。如果您需要多色框，最好的选择可能是研究通过 JavaScript 提供支持的 <select> 替代方案。
Select2 成功了

标签： html css font-awesome

【解决方案1】：

我现在正在为我的下拉菜单使用 Select2 插件。我可以通过使用 Select2 的 templateResult / templateSelection 格式化方法来实现这一点。

$('#dropdown').select2(
                                    templateResult: format,
                                    templateSelection: format,
                                    escapeMarkup: function (m) {
                                            return m;
                                    }   
                                });

function format(option) {
    var color = $(option.element).attr('data-color');
    return '<i class="fa fa-square" style="color : ' + color + '"></i> ' + option.text;
};

注意我在 Option 上的 data-color attr，这允许在 Select2 的格式参考函数中检索以确定单个框的颜色。

<option data-color="..."></option>

【讨论】：