將圖標從jQuery UI更改爲PrimeFaces中的FontAwesome

我有一個PrimeFaces p:tree，我可以使用this添加字體超棒的展開和摺疊圖標，但在PrimeFaces之前有一個箭頭圖標，我無法弄清楚如何切換字體真棒箭頭（fa-arrow-circle-down和fa-arrow-circle-right），或將顏色更改爲白色也足以滿足我的需求。將圖標從jQuery UI更改爲PrimeFaces中的FontAwesome

我看過Firebug，發現PrimeFaces箭頭來自圖像url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo")我不確定我是否可以在不創建或導入新圖像的情況下更改圖像的顏色。

我看着其他職位here因爲PrimeFaces使用的圖像和FontAwesome是CSS，我不知道如何更換箭頭，TreeNode沒有一個setIcon方法類似MenuItem。

這裏是我的樹代碼：

<p:tree selectionMode="single"> 
    <p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder"> 
    <h:outputText value="Home" /> 
    </p:treeNode> 
    <p:treeNode type="document" icon="fa fa-file-text-o fileColor"> 
    <h:outputText value="Staff" /> 
    </p:treeNode> 
</p:tree>

樹箭頭圖標：

來源

2017-04-20 Avinash Moram

@Kukeltje你對此有什麼想法？ –

_「我不確定我是否可以在不創建或導入新圖像的情況下更改圖像的顏色。」_：您不能 – Kukeltje

_「Primefaces使用的圖像和字體真棒是CSS」_都是'CSS'後者是字體 – Kukeltje

試試我FontAwesomeResourceHandler。

這個資源處理程序將來自社會各界PrimeFaces主題剝去jQuery UI的圖標，並增加了FontAwesome rules到主題。您可以在現有應用程序上使用它，而無需轉換所有XHTML（例如ui-icon-gear至 fa fa-cog）。注入的CSS將爲map all the UI icons。

加入這個依賴於你的pom.xml：

<dependency> 
    <groupId>com.github.jepsar</groupId> 
    <artifactId>primefaces-theme-jepsar</artifactId> 
    <version>0.9.1</version> 
</dependency>

然後，在faces-config.xml，添加處理程序：

<application> 
    <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler> 
</application>

來源

2017-04-21 06:47:39

另一種方式我試圖用從另一個primefaces主題具有白色圖標圖標箭頭。如果您在其他主題中找到適合您的箭頭圖標的顏色，這只是另一種方式。否則，我會爲Jasper的解決方案爲自定義圖像做一個乾淨的解決方案。只是發佈這是另一種選擇。

我正在使用primefaces-aristo並在primefaces-black-tie中找到白色箭頭圖標，所以我用該主題圖像覆蓋了箭頭圖標。

.navTree > .ui-treenode-content > .ui-tree-toggler { 
background-image: url("#{resource['primefaces-black-tie:images/ui-icons_ededed_256x240.png']}");

}

來源

2017-07-31 19:55:45

這是好的，如果它是一個圖標。對於更多，它變得很麻煩 – Kukeltje

是真的，同意。這就是我接受Jaspers回答的原因:) –

:-)好的......沒問題 – Kukeltje

將圖標從jQuery UI更改爲PrimeFaces中的FontAwesome

回答

相關問題