아이콘 글꼴 : 어떻게 작동합니까?

아이콘 글꼴 : 어떻게 작동합니까?

---

아이콘 글꼴은 글꼴 일 뿐이며 클래스 이름을 호출하여 아이콘을받을 수있는 것을 알고 아이콘 글꼴 은 어떻게 작동합니까?

Chrome에로드 된 관련 아이콘 글꼴 리소스를 확인하여 아이콘 글꼴이 일반 글꼴과 비교하여 아이콘을 표시하는 방법을 확인했지만 발생하는 것이 없습니다.

사용 가능한 아이콘 글꼴 이 많음에도 불구 하고이 "아이콘 글꼴 기술"이 어떻게 수행에 대한 리소스를 찾지. 아이콘 글꼴을 또한 통합 하는 방법을 보여주는 많은 리소스가있지만이것이 수행되는 방법 에 대해 공유하거나 글을 쓰는 사람은없는을 구석으로 같습니다!

---

Glyphicons이 있는 이미지 와 없는 글꼴. 모든 아이콘은 스프라이트 이미지 (개별 이미지로도 사용 가능) 내에서 발견 다음과 같이 요소에 추가 backround-image됩니다.

실제 글꼴 아이콘 ( 예 : FontAwesome ) 은 특정 글꼴을 다운로드하고 content속성을 사용합니다. 예를 들면 다음과 같습니다.

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

이

content속성 은 이전 브라우저에서 지원되지 않은 이미지 도 사용합니다 .

다음은 글꼴로 완전히 사용 된 원시 FontAwesome의 예입니다. (- 이걸 볼 수 없을 수도 있습니다!) 구급차로 바 정렬니다 : http://jsfiddle.net/GWqcF/2

---

CSS 클래스가 특정 문자 (특수 글꼴의 아이콘으로 표현 됨)를 삽입하는 방법에 대한 질문 인 경우 FontAwesome 의 소스를 살펴 봅니다 .

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

따라서 CSS 콘텐츠 지시문은 문자를 삽입하는 데 사용됩니다 (다른 독자를 엉망으로 만들지 않는 유니의 특별한 개인용 예약 영역에서 코드 것입니다).

---

웹 폰트 아이콘은 어떻게 작동합니까?

웹 글꼴 아이콘은 CSS를 사용하여 콘텐츠 속성을 사용하여 HTML에 특정 글리프를 삽입하는 방식으로 작동합니다. 그런 다음 @font-face삽입 된 글리프의 스타일을 지정하는 dingbat 웹 폰트를로드하는 데 사용 합니다. 삽입 된 글리프가 원하는 아이콘이 결론 것입니다.

시작하려는 특정 ASCII문자 또는 유니 코드 글꼴 (A, B, C, !, @, #, etc.)의 개인 사용 영역에 정의 된 필요한 아이콘이있는 웹 글꼴 파일이 필요합니다.이 파일 은 유니 코드 글꼴의 특정 문자가 사용하지 않는 글꼴의 공백입니다. 유니 코드 인코딩 글꼴.

반응 형 웹 폰트 아이콘에서 웹 폰트 아이콘을 만드는 방법에 대해 자세히 알아보세요 .

참고 URL : https://stackoverflow.com/questions/15503139/icon-fonts-how-do-they-work