글꼴을 사용하여 웹 페이지에 아이콘 그리기

첫 번째 단계는 다운로드입니다. IcoMoon 웹사이트에서 글꼴 아이콘을 선택하고 압축을 푼 후 프로젝트 디렉터리에 글꼴 폴더를 넣습니다. 글꼴 폴더에는 네 가지 형식의 글꼴 파일이 있습니다:

참고: 브라우저는 각 글꼴을 일관되게 지원하지 않으므로 모든 브라우저에서 글꼴 아이콘을 표시하려면 이러한 글꼴 파일을 동시에 도입해야 합니다.

두 번째 단계는 @font-face 규칙을 사용하는 것입니다. 스타일 파일의 글꼴 사용자 정의

<code class="language-css hljs" style="border: 0; border-radius: 4px; font-size: 90%; background-color: #d6dbdf; color: black; display: block; overflow-x: auto; background: white; -webkit-text-size-adjust: none; padding: 0.5em;"><span class="hljs-at_rule">@<span class="hljs-keyword" style="color: #00f;">font-face</span></span><span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value" style="color: #a31515;"><span class="hljs-string" style="color: #a31515;">'imooc-icon'</span></span></span>;<span class="hljs-comment" style="color: #008000;">/*自己取的名称*/</span>
    <span class="hljs-rule"><span class="hljs-attribute">src</span>:<span class="hljs-value" style="color: #a31515;"><span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.eot"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"embedded-opentype"</span>),<span class="hljs-comment" style="color: #008000;">/*后缀为eot,format对应的字符串*/</span>
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.ttf"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"truetype"</span>),
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.woff"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"woff"</span>),
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.svg"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"svg"</span>)</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value" style="color: #a31515;">normal</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-style</span>:<span class="hljs-value" style="color: #a31515;">normal</span></span>;
}</span>
</code>

세 번째 단계는 글꼴 아이콘을 표시하는 것입니다. 예를 들어, 스팬 태그에 글꼴 아이콘을 표시하려면 먼저 앞서 다운로드한 압축 해제된 글꼴 폴더를 열고 그 안에 있는 데모.html을 클릭한 후 아이콘 인코딩을 얻으면 됩니다.

오른쪽과 같이 스팬 태그에 아이콘 코드를 작성합니다.
그리고 스팬 태그의 글꼴을 스타일의 사용자 정의 글꼴 이름으로 설정합니다.

마지막으로 최적화와 호환성입니다. IE와 호환되도록 @font-face 규칙이 개선되었습니다.

더 나은 표시 효과를 얻으려면 스팬 스타일에 더 많은 코드를 추가해야 합니다.

다음으로 두 번째 글꼴 아이콘 활용 방법을 소개하겠습니다.
글꼴 아이콘의 이름을 클래스 이름으로 사용하고 이 클래스 이름을 해당 레이블에 추가합니다. 코드 조각은 다음과 같습니다.

<code class="language-cs hljs" style="border: 0; border-radius: 4px; font-size: 90%; background-color: #d6dbdf; color: black; display: block; overflow-x: auto; background: white; -webkit-text-size-adjust: none; padding: 0.5em;">.icon-film:before{
    content:<span class="hljs-string" style="color: #a31515;">'\e913'</span>;<span class="hljs-comment" style="color: #008000;">/*注意这里用的是反斜线*/</span>
}
<span <span class="hljs-keyword" style="color: #00f;">class</span>=<span class="hljs-string" style="color: #a31515;">"icon-film"</span>>&<span class="hljs-preprocessor" style="color: #2b91af;">#xe910;</span></span>
</code>

참고: 글꼴 아이콘을 다운로드할 때 웹사이트 상단의 환경설정 버튼을 클릭하여 매개변수를 설정할 수 있습니다. 다운로드 후 내부에서 CSS 파일을 열면 바로 사용할 수 있는 코드가 있습니다.

참고 자료: MOOC - 글꼴을 사용하여 웹페이지에 아이콘 그리기