SCSS/CSSを設定する

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

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

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

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

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

style.scssの3行目（@font-face{ ）以降を_icf-style.scssにコピペします

↓

エディタで variables.scssを開き、すべてコピーする
※既存追加時は、追加分のみコピーする

@charset "UTF-8"; と@font-faceの間にペーストする

フォントファイルを設置した場所にパスを通します。
変数は$icomoon-font-pathを流用します。

[e.g.]
以下のようなディレクトリ構成の場合です

そのままではcssを生成できないので、ブラウザで表示する用のSCSSに読み込みませます。

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

※エディタではcontentに指定した文字は表示されないです

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アイコンフォントを作って、素敵なアイコンでサイトを彩ってみてください：）