スポンサーリンク

スポンサーリンク

ブログ

Webアイコンを使ってみよう! IcoMoon 編

2018年11月3日

シェア

 
以前Webアイコン(フォントアイコン)の導入方法としてFont Awesomeの使い方についての記事を書きました。

 
FontAwesomeはアイコンの種類が豊富で使い方も簡単!フォントアイコンは画像ではなく文字として使えるのでとても使い勝手がよく重宝しています。

FontAwesomeにはFacebookやTwitterなどのSNSなどのアイコンもあるのですが、はてなブックマーク、LINEなどがありません。

私はFontAwesomeにはない『はてなブックマーク』『LINE』『Feedly』の3つが使いたくなり、『IcoMoon』のアイコンフォントを導入してみましたので今回の記事は「IcoMoonの導入方法」について書きたいと思います。

 

 

IcoMoon

    

前回書いたFontAwesomeの導入方法はFontAwesomeのサーバーからアイコンフォントを呼び出して自分のサイトに表示させる方法です。

今回導入したIcoMoonは、アイコンのデータを自分のサイトのサーバーに入れて、自分のサーバーから呼び出して表示させるダウンロード型のフォントアイコンです。

 

きらり
ダウンロード型ってなんだか難しそうだね。
結耶
私もそう思ってたけど意外と簡単だったよ!
しかも『自分でアイコン』が作れちゃうんだよ!

 

フォントアイコンが作れる!?

私は今回しませんでしたが、SVG形式の画像を使うと自分の好きなフォントアイコンが作れます。

SVG形式の画像の作り方やPNG、JPEGをSVG形式に変換する方法などを解説しているサイトはたくさんありますのでそちらを参考にしてください。

 

スポンサーリンク

 

 

IcoMoonの導入方法

 

アイコンフォントのダウンロード

まずはWebアイコンフォントのデータのダウンロードをおこないます。

STEP1 IcoMoonに移動

IcoMoonに移動し、右上の[IcoMoon App]をクリックします。

STEP2 アイコンの選択

使いたいアイコンを下の一覧から選択もしくは右上の検索フォームで検索してください。
(使いたいアイコンが複数ある場合は複数選択してください。)

 

アイコンフォントにしたい画像がある場合

アイコンフォントにしたい画像(SVG形式)がある場合は、[Import Image]をクリックして画像をアップロードしてください。(複数ある場合はひとつずつアップロードしてください。)

STEP3 フォントのダウンロード

使いたいアイコンをすべて選択したら画面右下の[Generate Font]をクリックしてください。

選択したアイコンが一覧で表示されますので確認して、右下の[Download]をクリックしてファイル(ZIP形式)をダウンロードしてください。

 

自分のサイトで使えるようにする

ダウンロードしたフォントをサイトで使えるようにします。

STEP1 ファイルを解凍する

ダウンロードしたZIPファイルを解凍してください。

※解凍は解凍ツールを使用してください。

 

解凍すると上記のフォルダとファイルが入っています。
使うのは『Fonts』フォルダと『style.css』のふたつです。

STEP2 サーバーにアップロード

Fonts』フォルダをサーバーにアップロードします。

Fontsフォルダには以下のファイルが入っています。
 

Fontsフォルダの中身
  • icomoon.eot
  • icomoon.svg
  • icomoon.ttf
  • icomoon.woff

 
この4つのファイルがないと使えませんのでFontsフォルダごとアップロードしてください。

FTPツールを使ってファイルを以下の場所にアップロードしてください。

Fontsフォルダを置く場所(WordPressの場合)
[wp-content][themes]お使いのテーマフォルダ

 
Fontsフォルダをお使いのテーマフォルダの中(style.cssと同じ場所)に入れてください。

子テーマをお使いの方は子テーマフォルダの中に入れてください。

STEP3 CSSを追加する

次に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形式のアイコンフォントは拡大しても綺麗に表示されます。
導入も意外と簡単なのでぜひ導入してみてください。

 

スポンサーリンク

 

フォロー

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら Contact

 

ブログサークル
ブログにフォーカスしたコミュニティーサービス(SNS)。同じ趣味の仲間とつながろう!

 

おすすめ

おすすめ

       
シェア

-ブログ
-,

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.