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

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

1. ベクターツール（Illustratorなど）でアイコンを作る
2. アイコンをWebアイコンフォントに変換する
3. SASS/CSS、HTMLを設定する

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

SCSS/CSSを設定する

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

Webフォントアイコン用のSCSSファイルを作る

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

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

IcoMoonのstyle.scssをベースに作成する

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

style.scssの3行目（@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
Webフォントアイコン表示用のclassを指定する

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

_icf-style.scssのvariableで設定した変数名を、そのままclass名にあてるとWebフォントアイコンが表示されます

↓

※ブラウザ上での表示

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

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