Adobe XD ってインストールしていないフォントは表示されませんよね…
Photoshop はテキストを編集しなければ表示されたのに…
Adobe XD のデータをもらって、いざコーディングをしようとするも…
「あ！アイコンフォントが見えない！」なんてことが…
というわけで、アイコンフォントをサイトごとに作成し、デザイン、コーディングをスムーズにしたいと思います！
アイコンフォントを作成する
アイコンフォントを作成するには、神サイト Fontello を利用します。
1. アイコンを選択する
ずらっと並んだアイコンの中から利用したいアイコンをクリックして選択します。
矢印のような上下左右のパターンがあるアイコンは、利用しない場合でも上下左右を選択しておくことをオススメします。
後でアイコンを追加すると、アイコンの順番がめちゃめちゃになり、管理しづらくなります。
自分で作ったアイコンを利用したい場合は、SVGファイルとして作成しておきます。
一番上の Drag custom SVG icons or SVG font here. と書いてあるグレーの部分にSVGファイルをドラッグします。
2. アイコンの名前を設定する
利用したいアイコンを選択すると上部のタブ Customize Names が選択できるようになります。
クリックすると、アイコンと名前の一覧画面が表示されます。
デフォルトで名前は設定されていますが、変更したい場合はクリックすると接頭辞の icon- 以降が編集できます。
3. アイコンの unicode を設定する
利用したいアイコンを選択すると上部のタブ Customize Codes が選択できるようになります。
クリックすると、アイコンと unicode の一覧画面が表示されます。
デフォルトで unicode は設定されていますが、変更したい場合はクリックすると接頭辞の U+ 以降が編集できます。
ここで設定した unicode は CSS で利用するため、E000、E001、E002…のように連番にしておくと管理が楽になります。
E000～F8FFは私用領域となり、文字は割り当てられていません。
そのため、アイコンフォントに割り当てることが可能となります。
Unicode一覧 E000-EFFF - Wikipedia
4. アイコンフォントの名前を変更する
サイトごとにアイコンフォントを管理するため、作成するフォント名を変更します。
ico-+サイト名 のように変更することをオススメします。
何も入力しない場合は fontello という名前になります。
5. アイコンフォントをダウンロードする
右上の Download webfont ボタンをクリックしてダウンロードします。
ダウンロードしたファイル構造は以下のようになっています。
fontello-xxxxxxxx/
├── css/
│ ├── animation.css
│ ├── ico-sitename-codes.css
│ ├── ico-sitename-embedded.css
│ ├── ico-sitename-ie7-codes.css
│ ├── ico-sitename-ie7.css
│ └── ico-sitename.css
├── font/
│ ├── ico-sitename.eot
│ ├── ico-sitename.svg
│ ├── ico-sitename.ttf
│ ├── ico-sitename.woff
│ └── ico-sitename.woff2
├── config.json
├── demo.html
├── LICENSE.txt
└── README.txt
複数のフォントファイルが格納されていますが、IEも考慮しているためです。
IEなき今、必要なフォントは以下の2種類だけで十分です。
- デザイン
- ico-sitename.ttf
- Web
- ico-sitename.woff2
デザインする
1. アイコンフォントをインストールする
ダウンロードした ico-sitename.ttf をインストールします。
2. 利用したいアイコンをコピーする
- ダウンロードしたファイルの中に格納されている
demo.htmlをブラウザで開く - アイコンフォントの一覧が表示されるので、利用したいアイコンを選択しコピーする
3. アイコンフォントをデザインに表示する
デザインツールのテキスト入力時、フォント名に ico-sitename を選択し、コピーしたアイコンをペーストするとアイコンが表示されます。
コーディングする
1. CSS でアイコンフォントを読み込む
@font-face {
font-family: icons;
src: url(ico-sitename.woff2) format('woff2');
}
2. 利用したいアイコンの unicode をコピーする
- ダウンロードしたファイルの中に格納されている
demo.htmlをブラウザで開く - アイコンフォントの一覧が表示されるので、右上の
show codesをクリック - アイコン名が unicode に切り替わるので、利用したいアイコンの unicode をコピーする
3. アイコンフォントをブラウザに表示する
コピーした unicode を 疑似要素 ::before の content プロパティに設定して表示させます。
@font-face {
font-family: icons;
src: url(ico-sitename.woff2) format('woff2');
}
.hoge::before {
font-family: icons;
content: '\e801';
}
Sass を利用する
Sass を利用するとアイコンの管理と記述が楽になります。
@use 'sass:map';
// アイコンの名前と unicode をマップで定義
$icon-font-map: (
up-open: 'e800',
down-open: 'e801',
left-open: 'e802',
right-open: 'e803',
angle-up: 'e804',
angle-down: 'e805',
angle-right: 'e806',
angle-left: 'e807',
angle-circled-up: 'e808',
angle-circled-down: 'e809',
angle-circled-left: 'e810',
angle-circled-right: 'e811',
angle-double-up: 'e812',
angle-double-down: 'e813',
angle-double-right: 'e814',
angle-double-left: 'e815',
twitter: 'e816',
instagram: 'e817',
facebook: 'e818'
);
// アイコンの unicode を返す関数
@function ico($icon-name) {
// 引数に指定した名前のアイコンがある
@if map-has-key($icon-font-map, $icon-name) {
@return #{"'\\" + map-get($icon-font-map, $icon-name) + "'"};
}
// 引数に指定した名前のアイコンがない
@warn 'iconfont name "#{$icon-name}" not found.';
@return null;
}
// CSS に出力する内容
@font-face {
font-family: icons;
src: url(ico-sitename.woff2) format('woff2');
}
.hoge {
&::before {
content: ico(down-open);
}
}
@font-face {
font-family: icons;
src: url(ico-sitename.woff2) format('woff2');
}
.hoge::before {
font-family: icons;
content: '\e801';
}
アイコンを編集する
アイコンの追加や削除、アイコン名を変更したい…
そんな時は、
- Fontello のサイトを表示する
- ダウンロードしたファイルの中に格納されている
config.jsonをサイト上にドラッグする
するとアイコンの選択状態が復元されます！
まとめ
いかがでしたでしょうか？
Fontello を利用すると、アイコンフォントの作成、利用、管理がとっても楽になります。
サイトごとに作成し、ダウンロードしたファイルをバージョン管理することをオススメします。