Javascript 在图标选择器中使用Unicode图标
我正在尝试在我的应用程序中实现一个图标选择器,它允许用户选择一个数学运算符进行数据比较 我已经能够在页面上工作了,但是图标本身有问题。我可以毫无疑问地使用GlyphIcon,但我想使用的图标是Unicode集合,我不确定如何以图标选择器能够理解的方式引用它们 在定义图标选取器数据集的代码中,我可以通过类引用图标来获取要加载的GlyphIcon:Javascript 在图标选择器中使用Unicode图标,javascript,css,unicode,icons,glyphicons,Javascript,Css,Unicode,Icons,Glyphicons,我正在尝试在我的应用程序中实现一个图标选择器,它允许用户选择一个数学运算符进行数据比较 我已经能够在页面上工作了,但是图标本身有问题。我可以毫无疑问地使用GlyphIcon,但我想使用的图标是Unicode集合,我不确定如何以图标选择器能够理解的方式引用它们 在定义图标选取器数据集的代码中,我可以通过类引用图标来获取要加载的GlyphIcon: icons: ['glyphicon glyphicon-home', 'glyphicon glyphicon-repeat', 'glyphicon
icons: ['glyphicon glyphicon-home', 'glyphicon glyphicon-repeat', 'glyphicon glyphicon-search',
'glyphicon glyphicon-arrow-left', 'glyphicon glyphicon-arrow-right', 'glyphicon glyphicon-star', '<'],
这与我将它们添加到index.jade文件中的方式相同,我将使用.glyphicon.glyphicon-arrow-left在页面上放置一个图标
但是,我不能让Unicode条目出现,如果我点击空白图标,“我最终找到一个解决方案。我为我需要的每个符号创建了CSS类,并使用选择器指定将出现在元素之前的内容。然后,我将Unicode字符的转义十六进制值作为字符串传递给样式中的content属性。代码最终是这样的:
/* Unicode icons for mathematical operators */
.lessThan:before {
content: "\3c";
}
.greaterThan:before {
content: "\3e";
}
.lessThanEqual:before {
content: "\2264";
}
.greaterThanEqual:before {
content: "\2265";
}
.equalTo:before {
content: "==";
}
.notEqualTo:before {
content: "\2260";
}
然后能够将这些类名传递给“icons”数组。尽管不是直接按照您的要求,但我已经实现了一个字体很棒的图标选择器,带有单选按钮,没有Javascript。您可以使用类似的方法来显示您的数学运算符 这是通过直接在HTML中使用图标并隐藏默认单选按钮来实现的:
<input type="radio" class="hide" id="radio-fa-plane" name="icon" value="plane">
<label for="radio-fa-plane">
<i class="fas fa-plane"></i>
</label>
<input type="radio" class="hide" id="radio-fa-plane" name="icon" value="plane">
<label for="radio-fa-plane">
<i class="fas fa-plane"></i>
</label>