CSS 글꼴 아이콘을 사용하는 방법

Css에서는 글꼴 및 style.css 파일을 도입한 후 인라인 태그를 사용하여 글꼴 아이콘을 추가할 수 있습니다. 구문 형식은 ""입니다. 글꼴 아이콘의 색상과 크기는 해당 CSS를 통해 수정할 수 있습니다. 파일이 상대적으로 작아서 페이지의 http 요청을 줄이는 데 도움이 됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

웹사이트 https://icomoon.io/app/#/select를 통해 온라인으로 생성

하세요. 물론 다른 유사한 웹사이트도 있지만 이 사이트는 정말 훌륭하고, 훌륭하고, 훌륭합니다.

모든 아이콘을 SVG 형식으로 가져오고 모두 선택한 다음 글꼴 생성을 클릭하여 해당 글꼴 아이콘을 생성합니다. 그런 다음 패키지된 모든 파일을 다운로드합니다.

페이지는 해당 글꼴 아이콘을 참조합니다

다운로드한 패키지 파일의 디렉터리 구조는 위 그림과 같습니다. 글꼴과 style.css 파일만 소개하면 됩니다. 글꼴 파일은 eot 압축 글꼴 라이브러리, 통합 svg 아이콘, ttf 글꼴 및 woff 글꼴 형식입니다.

style.css에는 글꼴 파일 소개와 해당 아이콘의 스타일이 포함되어 있습니다.

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?n54c0o');
    src:    url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?n54c0o') format('truetype'),
        url('fonts/icomoon.woff?n54c0o') format('woff'),
        url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}

위 스타일 시트를 수정하여 자체 페이지를 표시하는 최상의 효과를 얻을 수 있습니다.

<span class="icon-uniE901"></span>

어떤 아이콘이 필요한가요? 인라인 태그(span, i, em)에 해당 클래스만 추가하면 됩니다.

요약

폰트 아이콘을 사용하면 참으로 편리하고, 해당 CSS를 통해 색상과 크기도 수정할 수 있습니다. 게다가 파일 크기가 상대적으로 작아서 페이지 로딩에 유리하고 http 요청도 줄어듭니다.

그러나 글꼴 아이콘 파일이 생성되었고 추가할 새 아이콘이 있는 경우 해당 글꼴 파일을 다시 생성하고 CSS 파일을 수정해야 합니다. 해결책은 생성하기 전에 사용되는 모든 아이콘을 최대한 추가하거나 타사 글꼴 아이콘 라이브러리를 사용하는 것입니다.

추천 학습: css 비디오 튜토리얼

위 내용은 CSS 글꼴 아이콘을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!