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

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

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.)또는 유니 코드 글꼴의 개인 사용 영역에 정의 된 필요한 아이콘이 포함 된 웹 글꼴 파일이 필요 합니다. 유니 코드로 인코딩 된 글꼴.

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