FontAwesome 와 PrimeFaces

Question

었에 대한 갈망함의 아이콘 FontAwesome 내부 Primefaces,그리고 마지막으로 Optimus 게시 어제 이 위대한 새로운.--> http://blog.primefaces.org/?p=3004#comment-5422

통합여 최대 Dicson 우리는 이제 사용할 수 있어야 합니다.

그러나 다음과 같은 튜토리얼에서 비디오 나는 일할 수 있다.

• 사용 PF4.0 하지만 JSF2.1 (유교에서는 비디오)
• 추가 마지막 maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

• 추가되는 mime 유형 web.xml 파일

• 화 관련 css 파일 <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

하지만 얻을 수 있는 나의 원하는 fa-버그입니다.

어떤 생각이 있으십니까?감사합니다!

Answer 1

^

로 제거 할 수 있습니다.

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}

.

Answer 2

이것은 이미 닫혀있는 것처럼 보입니다. 그러나 누군가가 원하는 아이콘 대신 "^"의이 문제를 해결하는 경우를 대비해서."^"을 숨기고 싶지는 않지만 오히려 실제 이미지를 보여주는 것은 초기 문제를 이해했던 것처럼

다음과 같은 것이 나타나면 [1] : http : //i.stack.imgur.com / 5gphz.jpg

최신 PrimeFaces 용기를 사용하여 상자 밖으로 fontawesome을 지원하는 항아리를 사용하여 벨로우가 올바른지 확인하고 도움이 될 수 있습니다

1. web.xml add :

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

2. * .xhtml의

   에있는 항아리의 글꼴 멋진 CSS를 가리키는 헤드 태그가있는 fontawesome 아이콘을 추가하려는 경우 :

   <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css">
   

3. 마지막으로 아이콘을 올바르게 참조하십시오.

   <p:button outcome="add-user-form" value="Add User" icon="fa fa-user-plus">
        <f:param name="productId" value="10" />
   </p:button>
   

이것은 나를 도왔습니다.

환호

Answer 3

대 ^ 문제를 추가할 수 있습니다면 다음과 같은 CSS 스타일의:

.ui-icon.fa {
    text-indent:0px
}

이에 우선합 primefaces .ui-icon style {text-indent:-99999px}.....

내 경우에는,다음 아이콘을 보다 깨진.가 404 에 오류가 방화 콘솔(NetworkError 에 대한 woff 또는 ttf).나를 위해 다음과 같은 링크를 해결책이었: 지에서 접미사에 추가되는 자원 때 페이지 로드

Answer 4

http://www.primefaces.org/showcase/ui/misc/FA.XHTML 공식 데모를 확인하고 일부를 추가 해야하는 문서를 찾을 수 있으므로 지시를 따르십시오.