웹 페이지에 아이콘 글꼴을 표시하는 방법은 무엇입니까? HTML의 아이콘 글꼴 디스플레이 스타일

아이콘 글꼴을 사용하여 아이콘을 생성하면 이미지 기반 아이콘과 비교하여 다음과 같은 이점이 있습니다.

1. 무료 변경 크기

2. 색상을 자유롭게 수정하십시오

3. 그림자 효과를 추가하십시오

4.ie6도 지원할 수 있습니다

5. 투명성 및 회전 등과 같은 이미지 아이콘의 다른 속성을 지원합니다.

6. 브라우저가 지원하는 한 텍스트 스트로크 및 배경 클립 : 텍스트와 같은 속성을 추가 할 수 있습니다.

텍스트 수정 :

<H3>

<span aria-hidden = true data-icon = &#x21dd;> </span>

통계

</h3>

[Data-Icon] : 이전 {

유대 가족 : 아이콘; / * BYO 아이콘 글꼴, 똑똑하게 매핑 */

내용 : attr (data-icon);

말하기 : 없음; /* 신뢰할 수 없지만 이봐. */

}

개별 아이콘 :

<a href =# class = icon-alone>

<span aria-hidden = true data-icon = &#x25a8;> </span>

<span class = screen-Reader-text> rss </span>

</a>

/ * 위와 동일한 CSS, + */

.icon-alone {

디스플레이 : 인라인 블록; / * Chrome 19는이없이 클릭 가능성으로 이상했습니다 */

}

.Screen-Reader-Text { / * 재사용 가능, 도구 상자 종류의 클래스 * /

위치 : 절대;

상단 : -9999px;

왼쪽 : -9999px;

}

자신만의 IconFont를 만들어야하는 경우 IconMoon을 사용하는 것이 좋습니다. 그것을 사용하면 SVG 또는 글꼴을 업로드하여 필요한 아이콘 글꼴을 생성 할 수 있습니다. 이 기사는 IconMoon을 사용하여 생성하는 온라인 데모입니다.

결과를 보려면 온라인 데모를 방문하십시오. 아이콘 글꼴이 마음에 드 셨으면합니다. 아이콘이 충분히 부드럽 지 않다고 생각되면 처리에 Cufon을 사용하여 생성 된 아이콘이 더 아름답습니다.

출처 : http://www.gbin1.com/technology/css/20120827-icon-font-usage/