如何用字體真棒圖標替換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主題重寫教程在這里 。