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

Question

我正在尝试使用 font-awesome [=23] 切换 dijit 树中的图标（特别是与 dijitFolderClosed、dijitFolderOpened - class 对应于树中父节点的图标） =].当图标实际上是图像文件时，切换显示的图标很容易 - 我只需更改 getIconClass() 返回的 class。

但是，font-awesome 似乎可以通过插入伪元素来工作，但我很难让它与 dijit 一起工作。图标节点是 img 元素，虽然像 this 这样的方法看起来很有希望，但不适用于 img 标签，因为它们没有 content 属性。

有哪些不错的选择可以让 font-awesome 用作 dijit 树图标？看起来可能会像 the answers here 建议的那样弄乱 img 标签，或者我可以使用 replaceChild() 将 img 图标元素替换为 font-awesome 可以应用的元素。谁能想到更好的解决方案？

Answer 1

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

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

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

This post explains overriding dijit classes well. And dijit theme overriding tutorial is here.

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

How can I replace the icons in a dijit Tree with font-awesome icons?

javascript

html

css

dojo

font-awesome