Webアイコンを使ってみよう！ IcoMoon 編
以前Webアイコン(フォントアイコン)の導入方法としてFont Awesomeの使い方についての記事を書きました。
https://kirari-yums.net/post-3228/
FontAwesomeはアイコンの種類が豊富で使い方も簡単！フォントアイコンは画像ではなく文字として使えるのでとても使い勝手がよく重宝しています。
FontAwesomeにはFacebookやTwitterなどのSNSなどのアイコンもあるのですが、はてなブックマーク、LINEなどがありません。
私はFontAwesomeにはない『はてなブックマーク』『LINE』『Feedly』の3つが使いたくなり、『IcoMoon』のアイコンフォントを導入してみましたので今回の記事は「IcoMoonの導入方法」について書きたいと思います。
IcoMoon
前回書いたFontAwesomeの導入方法はFontAwesomeのサーバーからアイコンフォントを呼び出して自分のサイトに表示させる方法です。
今回導入したIcoMoonは、アイコンのデータを自分のサイトのサーバーに入れて、自分のサーバーから呼び出して表示させるダウンロード型のフォントアイコンです。
きらり
結耶
しかも『自分でアイコン』が作れちゃうんだよ！
フォントアイコンが作れる！？
私は今回しませんでしたが、SVG形式の画像を使うと自分の好きなフォントアイコンが作れます。
SVG形式の画像の作り方やPNG、JPEGをSVG形式に変換する方法などを解説しているサイトはたくさんありますのでそちらを参考にしてください。
IcoMoonの導入方法
アイコンフォントのダウンロード
まずはWebアイコンフォントのデータのダウンロードをおこないます。
IcoMoonに移動し、右上の［IcoMoon App］をクリックします。
使いたいアイコンを下の一覧から選択もしくは右上の検索フォームで検索してください。
(使いたいアイコンが複数ある場合は複数選択してください。)
アイコンフォントにしたい画像がある場合
アイコンフォントにしたい画像(SVG形式)がある場合は、［Import Image］をクリックして画像をアップロードしてください。(複数ある場合はひとつずつアップロードしてください。)
使いたいアイコンをすべて選択したら画面右下の［Generate Font］をクリックしてください。
選択したアイコンが一覧で表示されますので確認して、右下の［Download］をクリックしてファイル(ZIP形式)をダウンロードしてください。
自分のサイトで使えるようにする
ダウンロードしたフォントをサイトで使えるようにします。
ダウンロードしたZIPファイルを解凍してください。
※解凍は解凍ツールを使用してください。
解凍すると上記のフォルダとファイルが入っています。
使うのは『Fonts』フォルダと『style.css』のふたつです。
『Fonts』フォルダをサーバーにアップロードします。
Fontsフォルダには以下のファイルが入っています。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
この4つのファイルがないと使えませんのでFontsフォルダごとアップロードしてください。
FTPツールを使ってファイルを以下の場所にアップロードしてください。
Fontsフォルダをお使いのテーマフォルダの中(style.cssと同じ場所)に入れてください。
子テーマをお使いの方は子テーマフォルダの中に入れてください。
次にCSSの追加をします。
WordPressのstyle.cssに追加しますので、ファイルのバックアップを撮ることをオススメします
万が一のためファイル編集前にファイルのバックアップをとってください。
解凍したファイルの中のstyle.cssを開き、中に書かれているCSSをすべてコピーしてください。
WordPressの管理画面にいき、［外観］［テーマの編集］style.cssを開いて、コピーしたCSSを貼り付けてください。
(子テーマをお使いの方は子テーマのstyle.cssに貼り付けてください)
style.cssを編集するのが不安な方は［外観］［カスタマイズ］［追加CSS］に追加してもOKです。
貼り付けたら［保存］してください。
きらり
思ったより簡単だね♪
結耶
IcoMoonのアイコンフォントを使ってみよう！
実際に表示されるかを確認する為にも実際使ってみましょう。
IcoMoonのフォントはクラス名で呼び出します。
先ほどコピーしたCSSの『/* Better Font Rendering =========== */』下にアイコンのクラス名が書かれていますが、分かりづらいので、アイコンのコードはIcoMoonで確認(コピー)した方がいいと思います。
アイコンのコードをコピー・貼り付け
IcoMoonの右上の［IcoMoon App］へ移動します。
おそらくダウンロードしたアイコンが選択されている状態になっていると思うので、右下の［Generate Font］をクリック。
使いたいアイコンをクリックすると下に『Get Code』と表示されるのでクリックしてください。
上記の部分をコピーして記事に貼り付けてください。
プレビューで表示されていればOKです。
色や大きさの変更もできる
IcoMoonのアイコンフォントもCSSを使えば色や大きさを帰ることができます。
はてなブックマーク、LINE、FeedlyなどのブランドロゴはCSSですでにブランドカラーが設定されています。色を変更するにはCSSを変更(削除)する必要があります。
自分で色を指定する場合は、ここを変更するか削除してください。
きらり
結耶
表示されない場合は、ブラウザのキャッシュを削除してみてください。
キャッシュが残っていると設定ができていても表示されないことがあります。
最後に
IcoMoonは使いたいアイコンだけをダウンロードできるので大変便利です。
またSVG形式のアイコンフォントは拡大しても綺麗に表示されます。
導入も意外と簡単なのでぜひ導入してみてください。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
