HTML을 바꾸지 않고 Glyphicons를 Bootstrap 3의 FontAwesome으로 대체하는 방법은 무엇입니까?

Question

내 프로젝트에 Bootstrap 3을 사용하고 있는데 번들 된 Glyphicons 대신 FontAwesome 아이콘 라이브러리를 사용하고 있습니다.

문제는 Glyphicons에 의존하는 타사 구성 요소가있어서 HTML을 변경하고 싶지 않다는 것입니다.

나는 Bower과 SASS + Compass (SCSS)을 통해 글꼴을 멋지게 포함합니다.

HTML을 변경하고 다른 CSS 클래스를 적용하지 않고 Glyphicon을 FontAwesome으로 대체 할 수 있습니까?

Answer 1

당신은 SCSS를 사용 FontAwesome 사람과 Glyphicon CSS 클래스를 과부하 다음과 같은 방법을 사용할 수 있습니다

는

// Overloading "glyphicon" class with "fa". 
.glyphicon { 

    @extend .fa; 

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left". 
    &.glyphicon-chevron-left { 
     @extend .fa-chevron-left; 
    } 

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right". 
    &.glyphicon-chevron-right { 
     @extend .fa-chevron-right; 
    } 
} 

이 솔루션은 스티븐 Clontz의 based on code입니다.

이 재정의하기 전에 FontAwesome SCSS를 가져와야합니다. 갈매기 왼쪽 다음과 같은 FontAwesome 아이콘 갈매기 오른쪽 : 위의 예에서

나는 다음과 같은 두 가지 Glyphicons에 과부하가있어 화살표 왼쪽 및 화살표 오른쪽 공손히.

필요한 것을 얻으려면 타사 구성 요소에 사용 된 모든 아이콘에 과부하가 필요합니다.

그러나, 그것은 당신의 CSS 불필요하게 큰 것 원인, 모든 아이콘 과부하하지 마십시오 해킹 및 으로 이것을 고려!

다른 아이콘 라이브러리에 대한 지원을 구현하려면 타사 공급 업체를 설득 해보십시오. 이것은 적절한 해결책이 될 것입니다.

Answer 2

모든 글리 phicon 아이콘을 font-awesome에 매핑하기 위해이 GIST를 만들었습니다. 나는 대략 95 %의 정확도와 적용 범위를 가지고 있다고 추정 할 수있다. (glyphicon은 쓸모없는 아이콘을 가지고있다.

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of gist

---

이 당신이 당신의 부트 스트랩 빌드에서 glyphicon 아이콘을 모두 제거하면 모든 아이콘 과부하 않는 경우에도 알면 실제로는 (몇 바이트를 절약 할 수 - 물론 멋진 글꼴)

Answer 3

순수한 CSS에서는 font-awesome class (.fa)와 동일한 속성으로 글리프 콘 클래스를 정의하고 원하는 아이콘과 일치시킵니다.

.glyphicon{ 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon-chevron-left:before{ 
    content:"\f053" 
} 
.glyphicon-chevron-right:before{ 
    content:"\f054" 
}