Значки PrimeFaces

Я не могу найти способ выбрать стрелку icons, как те, что присутствуют в компоненте PickList, чтобы использовать их в других CommandButtons.

Хорошо, я знаю, что для использования значка в CommandButton необходимо следовать следующим инструкциям:

<p:commandButton outcome="target" icon="star" title="With Icon"/>

указав значок звездочки в файле css:

.star {
    background-image: url("images/star.png");
}

но я бы предпочел использовать те же самые стрелки, что и для компонента PickList.

Ответ 1

В главном интерфейсе используется jQuery themeroller для оформления пользовательского интерфейса. Все используемые значки в Primefaces находятся оттуда. Просто значок мыши, который вам нравится (в themeroller) и что-то вроде: .ui-icon-arrow-1-e появится. Затем используйте его следующим образом:

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>

Ответ 2

Здесь список всех доступных значков пользовательского интерфейса jQuery

jQueryUI Icons Cheatsheet N # 1 (нажмите Toggle text, чтобы получить все имена значков)

jQueryUI Icons Cheatsheet N # 2

по крайней мере, в <p:commandLink вы можете применять значки с помощью styleClass, например styleClass="ui-icon ui-icon-trash" (не помните, чтобы попробовать то же самое на p:commandButton - всегда предпочтительнее <p:commandLink)

B.T.W, <p:commandButton не имеет атрибута outcome, <p:button имеет его...

Кроме того,, поскольку PF v5.1.1 вы также можете использовать значки Шрифт Awesome из, установив для true параметр primefaces.FONT_AWESOME context, как этот

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

и используя его следующим образом:

<p:commandButton value="Download" icon="fa fa-download" type="button"/>

или

<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>

Смотрите витрину: PrimeFaces - FontAwesome - Начиная с версии 5.1.1

Ответ 3

Попробуй, это сработало для меня

.star {background:url("images/star.png") no-repeat !important;
     width:20px;
     height:16px;
    }