LoginSignup
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-29

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

  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」というファイル名を例にしての説明です

178b9320-04bc-c743-1564-ce0e36cc6d12.png

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

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

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

72ec4e36-e823-3d37-b63b-b166f0959315.png

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

61ac0a4d-de71-15d3-355f-561b1d460422.png

85f10350-b677-13a1-ebda-31619297b48c.png

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

d9c47274-38dc-9280-1dfd-f34861ee6442.png

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

4c787af1-95d1-96e4-f8e5-79480820ea0f.png

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

91ffd851-0132-c40c-75e3-e50bea461aae.png

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

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

94f87f8d-53a1-8fb9-bcb7-f92965b0807a.png
[e.g.]
以下のようなディレクトリ構成の場合です
89b7ed65-3ccb-b9cd-6bf0-58e9295d813f.png

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

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

918d4619-2e4c-59e1-6d38-8f9cb99dc58e.png

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

874803cc-bb5c-4f04-b4cc-ebf7d0a4e42f.png
※エディタではcontentに指定した文字は表示されないです

HTMLを設定する

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

892d4b80-c0b2-b7cb-32dd-0ae357571630.png
<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フォントアイコンが表示されます

38c205a3-a7a1-daa4-08bd-2eb000b3fb3f.png

ebc552df-e93c-a9ce-4219-a835231ddff5.png
※ブラウザ上での表示

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14