commandLink с конкретным размером значка. Primefaces/jsf

Question

Я пытаюсь установить определенный размер для своих значков, поскольку предопределенный установлен в 16x16 и является небольшим, но это не работает.

<p:commandLink id="trash" styleClass="ui-icon ui-icon-trash myIconsSize"/> 

CSS:

.myIconsSize { 
width:32px; 
height:32px; 
} 

Версия:

Primefaces 5,1

Answer 1

Primefaces использует свой собственный спрайт для икон:

primefaces-5.1.jar 
META-INF/resources/primefaces-aristo/images/ui-icons_616161_256x240.png 

Вы не можете установить размер изображения значка на этом, потому что это спрайт.

Вам нужен собственный спрайт с предопределенными значками и размерами.

Пример:

CSS:

.si-icon-16x16 { 
width: 16px; 
height: 16px; 
background-image: url('../images/sprites/sprite.png'); 
background-repeat: no-repeat; 
display: block; 
overflow: hidden; 
text-indent: -99999px; 
} 

/*your icon position on the sprite*/ 
.si-icon-send { 
background-position: -20px -328px; 
} 

JSF:

<p:commandLink id="send" styleClass="si-icon-16x16 si-icon-send"/> 

Другим решением является использование отделенных изображений для каждого commandLink и установить размер, что вы хотите. Другие решения объясняют это.

Answer 2

Там, кажется, нет никакого способа придания стиля CSS непосредственно на иконку вы указали. Но вы можете добиться того, что вы пытаетесь сделать, используя свое собственное изображение со следующим стилем:

.myIconsSize { 
     background-image: url("images/your-own-image.png"); 
} 

Answer 3

Вы можете использовать graphicImage между ними.

Попробуйте это:

<p:commandLink id="trash"> 
    <h:graphicImage name="images/your_image.jpg" width="32" height="32"/> 
</p:commandLink>