Question

我正在尝试使用font-awesome“icons”切换dijit树中的图标（特别是与dijitFolderClosed，dijitFolderOpened相对应的图标 - 适用于树中父节点的类）。当图标实际上是图像文件时，切换出显示的图标很容易 - 我可以更改getIconClass（）返回的类。

然而，font-awesome似乎通过插入伪元素来工作，而我在使用dijit时遇到了麻烦。图标节点是img个元素，虽然像this这样的方法看起来很有希望，但不适用于img标记，因为它们没有content个属性。

有什么好的选择让字体真棒作为dijit树图标工作？看起来像the answers here建议的img标签一样，或者我可以使用replaceChild（）将img图标元素替换为font-awesome可以应用的元素。谁能想到更好的解决方案？

Answer 1

你需要覆盖你的dijit样式：在.dijit上设置background-image: none。在.dijit *内部类设置display:none，然后将FontAwesome内容放在伪类之前。

我在很多dijits上使用Sass完成了这个，here是dijit / form / ComboBox的一个例子。关键位是：

     .dijitDownArrowButton {
         &:before {
             font-family:'FontAwesome';
             content: '\f0d7';
         }
         .dijitArrowButtonContainer {
             background-image: none;
         }
         .dijitArrowButtonInner {
             display: none;
         }
    }

This post解释了重写的dijit课程。 dijit主题覆盖教程是here。

如何使用font-awesome图标替换dijit树中的图标？

1 个答案: