primefaces

난 내 p:commandButton에서 사용하는 새로운 아이콘을 만들

에서 사용자 정의 아이콘을 만들하지만 난 나를 위해이 메도primefaces

PrimeFaces: how can I make use of customized icons?

그러나 didnt 한 일을 사용 실패하는 방법에 대해 설명합니다.

CSS 코드 :

.img-button-help { background-image: url('img/mag.ico') !important; }

JSF 코드 :

<p:commandButton icon="img-button-help" value="test" />

결과 : 난 당신이 내 코드가 표시됩니다 enter image description here 새로운 결과를 -에 customed 아이콘을 사용하는 방법>

Primefaces ??

출처

2013-10-25 marouanoviche

이미지가없는 것처럼 보이므로 표시 할 아이콘이 없습니다. Firebug가 설치된 Chrome 또는 Firefox를 사용하여 F12 키를 누르고 리소스 섹션에서이 아이콘에 액세스 할 수 있는지 확인하십시오. –

나는 이미지가 발견되었지만 보이지 않거나 p에 맞춰진 것 같아요 : commandbutton – marouanoviche

확실한 이미지가 있습니까? 사이트에서 액세스 할 수 있는지 확인 했습니까? 그것을 확인하는 한 가지 방법은 위의 내 설명에서 설명한 접근 방식을 사용하는 것입니다. Chrome 용 문서는 다음과 같습니다. https://developers.google.com/chrome-developer-tools/docs/resources –

안녕하세요 귀하의 CSS에 background-position을 추가 할 수 있습니다. primefaces 이미지는 스프라이트를 기반으로하고 .img-button-help의 경우 positon이 설정되어 있기 때문에 가능합니다. 이 시도 :

.img-button-help { 
    background-image: url('img/mag.ico') !important; 
    background-position: center !important; 
}

출처

2013-10-25 15:55:43 DaniP

역시 제가 게시 한 이미지와 같은 빈 공간이 있습니다. – marouanoviche

px로 위치 설정 시도 – DaniP

을 지금 내가 사용에 아이콘으로 그것을 가지고 내가 작은 아이콘을 생성 Danko가 inspriring이 문제에 대한 해결책을 발견하고 난 왼쪽

<p:commandButton value="test" style=" padding-left: 15px;background-image: url('img/mag.ico') !important;background-repeat: no-repeat;background-position: left;" />

에 배경으로 넣어 primefaces의 아이콘.

출처

2013-10-25 16:39:35 marouanoviche

CSS 스타일로 이동하는 것이 더 좋습니다. –

답변

관련 문제