Question

我正在尝试在我的应用中实现一个图标选择器，允许用户选择数学运算符进行数据比较。

我已经能够让fontawesome-iconpicker在页面上工作，但我自己的图标有问题。我可以毫无问题地使用glyphicons，但我想要使用的图标是Unicode集，我不知道如何以图标选择器理解的方式引用它们。

在我的代码中定义了图标选择器的数据集，我可以通过他们的类引用它们来加载glyphicons：

icons: ['glyphicon glyphicon-home', 'glyphicon glyphicon-repeat', 'glyphicon glyphicon-search',
        'glyphicon glyphicon-arrow-left', 'glyphicon glyphicon-arrow-right', 'glyphicon glyphicon-star', '&lt;'],

这与我将它们添加到我的index.jade文件中的方式相同，我将使用.glyphicon.glyphicon-arrow-left

在页面上放置一个图标。

但是，我无法显示unicode项目，如果我点击'＆lt;'的空白图标应该是，我得到这个错误：

Uncaught Error: Syntax error, unrecognized expression: .&lt;
at Function.Sizzle.error (jquery.js:1580)
at Sizzle.tokenize (jquery.js:2232)
at Function.Sizzle [as find] (jquery.js:854)
at jQuery.fn.init.find (jquery.js:2922)
at c._updateComponents (fontawesome-iconpicker.js:796)
at c.update (fontawesome-iconpicker.js:972)
at HTMLAnchorElement.c (fontawesome-iconpicker.js:522)
at HTMLAnchorElement.dispatch (jquery.js:5206)
at HTMLAnchorElement.elemData.handle (jquery.js:5014)

我认为问题在于图标选择器需要按类别引用图标，但我不知道该类将用于Unicode图标（我试图使用几个these）我无法从搜索中找到任何信息。我是否需要创建一些自定义CSS来为Unicode图标分配类？如果是这样，我将如何做到这一点？

谢谢！

Answer 1

虽然不是直接问您所要问的问题，但我实现了带有单选按钮且没有Javascript的Font Awesome图标选择器。您可以使用类似的方法来显示您的数学运算符。

这是通过直接在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>

https://jsfiddle.net/wjgpmcs2/10/

Answer 2

我最终找到了解决方案。我为我需要的每个符号创建了CSS类，并使用:before选择器指定将出现在元素之前的内容。然后，我将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'数组。

在图标选择器中使用Unicode图标

2 个答案: