Измените значок с jQuery UI на FontAwesome в PrimeFaces

У меня есть PrimeFaces p:tree и я смог добавить шрифт потрясающие развернутые и свернутые значки с помощью этого, но есть значок стрелки перед тем, который от PrimeFaces, и я не смог выяснить, как переключить его шрифт удивительные стрелки (fa-arrow-circle-down а также fa-arrow-circle-right), или изменение цвета на белый тоже мне достаточно.

Я посмотрел на Firebug и обнаружил, что стрелка PrimeFaces с изображения url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo") Я не уверен, что смогу изменить цвет изображения без создания или импорта нового изображения.

Я посмотрел другие посты здесь, потому что 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>

Значок стрелки дерева:

Источник

2 ответа

Решение

Попробуй мой FontAwesomeResourceHandler,

Этот обработчик ресурса удалит значки пользовательского интерфейса jQuery из тем сообщества PrimeFaces и добавит в тему правила FontAwesome. Вы можете использовать его в существующих приложениях без необходимости конвертировать все XHTML (например, ui-icon-gear в fa fa-cog). Внедренный CSS отобразит все значки пользовательского интерфейса.

Добавьте эту зависимость к вашему 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>
Источник

Другой способ, которым я пробовал, - это использование значков из другой темы, в которых есть белые значки. Это просто еще один способ, если вы найдете правильный цвет для ваших значков со стрелками в другой теме. В противном случае я бы выбрал решение Джаспера для чистого изображения для собственного изображения. Просто опубликовать это еще одна альтернатива.

Я использую 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']}");

}

Источник
Другие вопросы по тегам