특정 아이콘 크기의 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

지정한 아이콘에 직접 CSS 스타일을주는 방법은없는 것 같다

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

. 그러나 당신은 당신이 다음과 같은 스타일로 자신의 이미지를 사용하여 무엇을하려고 달성 할 수

.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>