Font-Awesome 사용 - Chrome에서는 <i class = "icon-ok"></i> 마크 업을 통해 표시되는 아이콘에 스타일이 표시되지 않고 아무 이벤트도 발생하지 않습니다.

Question

나는 아이코닉 글꼴 인 Font-Awesome을 사용하고 있습니다. 트위터 부트 스트랩과 함께 사용하십시오.

마크 업 -

<i class="icon-remove reset-preference-button"></i> 

CSS -

.reset-preference-button { 
cursor: pointer; 
} 

자바 스크립트 - 내가 페이지를 렌더링 할 때 요소 공중 선회 할 때

$(".reset-preference-button").on("click", function() { 
// ... do something 
}); 

, 커서는 포인터로 변경되지 않습니다. 아이콘을 클릭해도 아무런 변화가 없습니다. 이벤트를 묶기 전에 아이콘이 있는지 확인했습니다.

다른 요소가없는 & 요소를 사용하고 있습니다. 이 요소의 스타일을 명시 적으로 "display: inline-block;"으로 설정할 때처럼 작동합니다.

내 테스트에 따르면 이는 Chrome에서만 발생합니다. FF & IE에서 잘 작동합니다. 현재 크롬 버전은 18이지만 다른 버전에도 영향을 미칩니다.

은 이미 이것은 <i> 요소에 어떤 내용이 없기 때문에 무슨 일이 일어나고 https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

에서 버그를 제기 한 - 멋진 글꼴을 CSS 의사 요소를 사용하여 CSS와의 아이콘을 렌더링하기 전에.

당신은에 높이와 1em의 폭 설정 표시 설정할 수

:

i { 
    width: 1em; 
    height: 1em; 
    display:block; 
    cursor: pointer; 
} 

Answer 2

가 청소기 방법은 :before 요소에 스타일을 추가 간단한이다 (그래서 당신에 대해 걱정할 필요가 없습니다 블록을 오브젝트 높이 또는 너비).

i:before { 
    cursor: pointer; 
} 

: 여기

내 CSS 예제 코드