글리프 오버라이드없이 부트 스트랩에서 글꼴 굉장 사용

부트 스트랩 응용 프로그램에서 일부 글꼴 굉장 글꼴을 사용하고 싶습니다. 그것은 레거시 애플리케이션이며 고객은 새로운 아이콘을 원하지 않습니다. 현재 아이콘은 부트 스트랩 문자입니다. 글꼴 굉장 아이콘은 매우 비슷하지만 동일하지 않습니다. 별거 아니야? Font-Awesome을 사용하고 원하는 아이콘에 맞는 글꼴을 넣으려면 글꼴 군을 사용할 수 없어야합니다.글리프 오버라이드없이 부트 스트랩에서 글꼴 굉장 사용

내 프로젝트에는 글꼴 굉장한 '글꼴'디렉토리가 있습니다. 그것은 4 개 파일이 포함

fontawesome-webfont.eot 
fontawesome-webfont.svg 
fontawesome-webfont.tff 
fontawesome-webfont.woff

무엇 CSS 나는이 작업을 얻기 위해 추가해야합니까?

내 HTML 마크 업은 어떻게해야합니까? 다음과 같은 예를 보았습니다.

<g><text x="0" y="0">&#xf040</text></g>

그러나 내가 그렇게하면 작동하지 않습니다. 나는 몇 가지 단계가 빠져 있음을 안다. 어떤 아이디어?

출처

2013-02-20 lostintranslation

검사 솔루션을 입력하고 당신 – Shail

을 위해 작동하는 경우 나이의 경우 수 있습니다 알려 잘못된 질문을합니다. 답 중 어느 것도 리터럴 유니 코드 문자 참조를 사용하지 않습니다. 사용자 코드 페이지는 의도적으로 의미가 없지만 이러한 글꼴 패키지가 제공하는 CSS 클래스는 의미가 명확합니다. 문자 참조를 직접 사용하면 문제가 해결됩니다. – amcgregor

font-awesome.css 파일의 "fw-icon-"에 대한 모든 "icon-"을 대체했습니다. 그런 다음 모든 부트 스트랩 아이콘이 여전히 동일하며 FontAwesome 아이콘이나 클래스를 사용해야하는 경우 앞에 "fw-"만 사용해야합니다.

예 :

<i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>

편집 :

오늘, 글꼴 4 신난다.0 출시 된 모든 클래스는 부트 스트랩의 아이콘 패턴에 다른 :

<i class="fa fa-camera-retro"></i> fa-camera-retro

당신이 볼 수 http://fontawesome.io/examples/

출처

2013-05-14 13:22:13 Blaze

두 글꼴이 별개이고 글리프가 "사용자"UNICODE 코드 페이지에 있기 때문에 이것이 올바른 해결책입니다. 이름 공간. – amcgregor

-1

중요 * 글리 phicon과 fontawesome을 모두 사용하려면 같은 이름의 아이콘을 비활성화해야합니다. fontwesome에서 Glyphicons를 사용하지 않으려는 경우 icon-screenshot을 사용한다고 가정합니다.
그리고 fontawesome에서 사용하려는 아이콘은 glyphicons에서 비활성화합니다. 첫 번째 단계는 bootstrap.css 파일 후 머리 부분에 fontawesome CSS 파일, 예제를 포함하는 것입니다

그냥 bootstrap.css에서 사용하지 않도록보다 fontawesome에서 icon-file를 사용하려면
. 이처럼
/* 아이콘 파일 { 배경 화면 : -24px -24px; } */

<head> 
<link rel="stylesheet" href="css/font-awesome.min.css"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 

</head>

참조 Jsfiddle Jsfiddle with font awesome

fontawesome 아이콘 간단한 버튼 : - 멋진 글꼴과

<a class="btn" href="#"> 
<i class="icon-repeat"></i> Repeat</a>

탐색 약 : -

<ul class="nav nav-pills"> 
    <li class="active"><a href="#"><i class="icon-file"></i> New File</a></li> 
    <li><a href="#"><i class="icon-cut"></i> Cut</a></li> 
    <li><a href="#"><i class="icon-edit"></i> Edit</a></li> 
    <li><a href="#"><i class="icon-paste"></i> Settings</a></li> 
</ul>

삽입 공간 사이 닫는 i 태그와 그 뒤에 입력하는 단어.

출처

2013-02-21 01:41:24 Shail

이렇게하면 부트 스트랩의 아이콘을 글꼴 굉장으로 대체하지만 OP는 부트 랩의 글꼴에 글꼴 썸네일의 아이콘을 추가하고 싶었습니다! – Robin

다른 이름의 아이콘을 사용할 경우 glyph와 fontawesome을 모두 사용할 수 있습니다. 동일한 이름의 아이콘이 두 번 표시됩니다. – Shail

글꼴 어썸이 정의한 CSS 클래스의 이름을 바꾸기 전까지는 이것이 불가능하다고 생각합니다. 폰트 굉장은 부트 스트랩의 아이콘을 대체하기위한 것이므로 아이콘 - * 클래스를 다시 정의합니다.

출처

2013-02-21 13:38:23 Robin

글리프 오버라이드없이 부트 스트랩에서 글꼴 굉장 사용

답변

관련 문제