Webアイコンフォントの作り方 - ③SASS/CSS、HTMLを設定する

この記事では、Webアイコンフォントを作るための３つの工程、

1. [ベクターツール（Illustratorなど）でアイコンを作る](https://qiita.com/m-nakamura/items/4711dec4d186464118d4)
2. [アイコンをWebアイコンフォントに変換する](https://qiita.com/m-nakamura/items/abc871b1da6cfaf4db42)
3. SASS/CSS、HTMLを設定する 

のうち、**SASS/CSS、HTMLを設定する**方法を説明します。



# SCSS/CSSを設定する

IcoMoonで作成したSCSSファイルを流用します。

## Webフォントアイコン用のSCSSファイルを作る
```/scss/``` ディレクトリの中に、_icf-style.scssを作成します。
※ファイル名は頭に「icf」と付いてるとフォントファイルやclassとも紐付けが出来て便利です
※今回は「 _icf-style.scss」というファイル名を例にしての説明です

> ![178b9320-04bc-c743-1564-ce0e36cc6d12.png](https://qiita-image-store.s3.amazonaws.com/0/54478/6b346d36-d13a-cd89-da91-339987a728c9.png)

※サイト共通で使用するSCSSファイルの場合です


### IcoMoonのstyle.scssをベースに作成する
IcoMoonでフォントを作成したときに一緒に出来たstyle.scssをベースにします。

> ![72ec4e36-e823-3d37-b63b-b166f0959315.png](https://qiita-image-store.s3.amazonaws.com/0/54478/db65c9e8-330a-e215-f8e9-ef251bdb3da4.png)


style.scssの3行目（`@font-face{ `）以降を_icf-style.scssにコピペします
> ![61ac0a4d-de71-15d3-355f-561b1d460422.png](https://qiita-image-store.s3.amazonaws.com/0/54478/f00c792b-5570-8abe-cd37-8b81e38bc220.png)
> ↓
> ![85f10350-b677-13a1-ebda-31619297b48c.png](https://qiita-image-store.s3.amazonaws.com/0/54478/2fab7f65-2a85-c6d6-d43d-15125219c59d.png)



###  IcoMoonのvariables.scssから変数を設定する

> ![d9c47274-38dc-9280-1dfd-f34861ee6442.png](https://qiita-image-store.s3.amazonaws.com/0/54478/8a689422-55f5-8aa4-c828-1d757473e906.png)


エディタで variables.scssを開き、すべてコピーする
※既存追加時は、追加分のみコピーする
> ![4c787af1-95d1-96e4-f8e5-79480820ea0f.png](https://qiita-image-store.s3.amazonaws.com/0/54478/07132f69-5bec-a9b9-78d9-96367acf6be6.png)


```@charset "UTF-8";``` と```@font-face```の間にペーストする
> ![91ffd851-0132-c40c-75e3-e50bea461aae.png](https://qiita-image-store.s3.amazonaws.com/0/54478/1e7ae119-2e88-f0f6-55bb-cc40f5c159fe.png)


### フォントファイルのパスを設定する

フォントファイルを設置した場所にパスを通します。
変数は```$icomoon-font-path```を流用します。
> ![94f87f8d-53a1-8fb9-bcb7-f92965b0807a.png](https://qiita-image-store.s3.amazonaws.com/0/54478/756db383-80ba-43f7-378a-7338dac7bad7.png)
> [e.g.] 
> 以下のようなディレクトリ構成の場合です
> ![89b7ed65-3ccb-b9cd-6bf0-58e9295d813f.png](https://qiita-image-store.s3.amazonaws.com/0/54478/3960688f-59b4-39da-ec35-6ac7531f10fd.png)


### cssを生成するSCSSにImportさせる

そのままではcssを生成できないので、ブラウザで表示する用のSCSSに読み込みませます。
> ![918d4619-2e4c-59e1-6d38-8f9cb99dc58e.png](https://qiita-image-store.s3.amazonaws.com/0/54478/344d6ba5-f57d-3335-86e2-b4fdb796ccb3.png)


ビルドしてcssとして吐き出されていることを確認します。
※style.scss→style.cssの例

> ![874803cc-bb5c-4f04-b4cc-ebf7d0a4e42f.png](https://qiita-image-store.s3.amazonaws.com/0/54478/830b588d-883f-5f00-cbb7-1a0f151c7ab1.png)
> ※エディタではcontentに指定した文字は表示されないです

# HTMLを設定する

HTMLに以下の様に記述します。

> ![892d4b80-c0b2-b7cb-32dd-0ae357571630.png](https://qiita-image-store.s3.amazonaws.com/0/54478/dfe50523-59c3-da46-f0bb-b3e4ff16d291.png)
> ※```<style>〜</style>```はサンプル用の記述です


**CSS**
style.css（webフォントアイコンの記述があるcss）を指定する

```HTML
    <link rel="stylesheet" href="../assets/css/style.css">
```
**HTML**
Webフォントアイコン表示用のclassを指定する

```HTML
    <i class="icf-arrow-single"></i>
```
_icf-style.scssのvariableで設定した変数名を、そのままclass名にあてるとWebフォントアイコンが表示されます

> ![38c205a3-a7a1-daa4-08bd-2eb000b3fb3f.png](https://qiita-image-store.s3.amazonaws.com/0/54478/831b904a-5caf-be9f-f67d-6239a9e602c8.png)
> ↓
> ![ebc552df-e93c-a9ce-4219-a835231ddff5.png](https://qiita-image-store.s3.amazonaws.com/0/54478/8c37624d-fd81-8c42-d605-704732c664ec.png)
> ※ブラウザ上での表示


以上が、SASS/CSS、HTMLを設定する方法です。

いかがでしたでしょうか？
Webアイコンフォントを作って、素敵なアイコンでサイトを彩ってみてください：）