如何用字体真棒图标替换dijit树中的图标？

Question

我试图用字体超棒的“图标”切换出dijit树中的图标（特别是那些与dijitFolderClosed，dijitFolderOpened对应的图标-适用于树中父节点的类）。 当图标实际上是图像文件时，切换出显示的图标很容易-我可以更改getIconClass（）返回的类。

但是，字体真棒似乎可以通过插入伪元素来工作，而我很难使它与dijit一起使用。 图标节点是img的元素，而一些类似的做法这看起来很有希望，但不起作用img标签，因为他们没有content属性。

有什么好的选择可以使字体真棒地用作dijit树图标？ 似乎有可能按照此处的建议将img标签弄乱，或者我可以使用replaceChild（）将img图标元素替换为font-awesome可以应用于的元素。 谁能想到更好的解决方案？

Answer 1

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

我已经在许多dijit上使用Sass完成了此操作， 这是dijit / form / ComboBox的示例。 关键位是：

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

这篇文章很好地解释了重载dijit类。 dijit主题重写教程在这里 。