이 기사에서는 웹 아이콘 글꼴을 만드는 세 가지 단계,

벡터 도구(예: Illustrator)로 아이콘 만들기

아이콘을 웹 아이콘 글꼴로 변환

SASS/CSS, HTML 설정

이 중 SASS/CSS, HTML을 설정하는 방법을 설명합니다.

SCSS/CSS 설정

IcoMoon에서 만든 SCSS 파일을 유용합니다.

웹 폰트 아이콘용 SCSS 파일 만들기

/scss/ 디렉토리에 _icf-style.scss를 만듭니다.
※파일명은 머리에 「icf」라고 붙어 있으면 폰트 파일이나 class와도 붙일 수 있어 편리합니다
※이번은 「_icf-style.scss」라는 파일명을 예로 한 설명입니다



※사이트 공통으로 사용하는 SCSS 파일의 경우입니다

IcoMoon의 style.scss를 기반으로 만들기

IcoMoon에서 글꼴을 만들 때 함께 만든 style.scss를 기반으로합니다.



style.scss의 세 번째 줄 (@font-face{) 이후를 _icf-style.scss에 복사합니다.


↓

IcoMoon의 variables.scss에서 변수 설정

편집기에서 variables.scss를 열고 모두 복사
※기존 추가 시에는 추가분만 복사


@charset "UTF-8"; 와 @font-face 사이에 붙여넣기

글꼴 파일의 경로 설정

글꼴 파일이 설치된 위치로 경로를 통과합니다.
변수는 $icomoon-font-path 를 유용합니다.


[e.g.]
다음과 같은 디렉토리 구성의 경우

CSS를 생성하는 SCSS로 Import

그대로 css를 생성할 수 없으므로 브라우저에서 표시할 SCSS로 로드하지 않습니다.



빌드하고 CSS로 내뿜는지 확인합니다.
※style.scss→style.css의 예


※에디터에서는 content로 지정한 문자는 표시되지 않습니다

HTML 설정

HTML에 다음과 같이 기술합니다.


※ <style>〜</style> 는 샘플용의 기술입니다

CSS
style.css(web 폰트 아이콘의 기술이 있는 css)를 지정한다

    <link rel="stylesheet" href="../assets/css/style.css">

HTML
웹 글꼴 아이콘 표시를 위한 클래스 지정

    <i class="icf-arrow-single"></i>

_icf-style.scss의 variable로 설정한 변수명을 그대로 class명에 대면 웹 폰트 아이콘이 표시됩니다.


↓

※브라우저상에서의 표시

이상이 SASS/CSS, HTML을 설정하는 방법입니다.

어땠습니까?
웹 아이콘 글꼴을 만들고 멋진 아이콘으로 사이트를 채색해보십시오 :)