アイコンフォント、ワードプレスでの簡単な導入&使い方

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

アイコンフォントの簡単な導入手順
ずっと導入したかったけどめんどくさくて導入していなかったアイコンフォントをやっとこさ導入してみました。

webアイコンフォントの導入方法はいろいろなサイトが詳しく説明してくださっているので、やり方自体は非常に簡単なのですが、逆に詳しすぎてめんどくさい・・・と思ってしまったので、私のように大雑把な性格でもwebアイコンフォントをサクッと導入するまでの手順をなるべくシンプルにまとめたいと思います。

ちょっ・・もう少し丁寧にやろうよ・・・という部分が多々あるかと思いますが、とりあえずwebアイコンフォントをサクッと簡単に導入したい方のために、余計な説明や設定は省いて最低限やったことのみです。

＜スポンサードリンク＞

Icomoonを利用してwebアイコンフォントを導入

今回のアイコンフォントはIcomoonを使用して導入しました。
Icomoon
（早速使ってみた）

Icomoomで好きなアイコンフォントを選ぶ

まずはIcomoonのサイトへ行き、好きなアイコンを思う存分クリックして選択していきます。

icomoonを使ったアイコンフォント導入方法
私はとりあえず、何も考えずに猫系フォントは必須で選んでおきました。

iconfont3
まだどういう使い方をするかノープランなので、とりあえず猫系アイコンとと汎用性が高そうな数字やチェックマークなどのアイコン、ソーシャル系のアイコンをどんどんクリックして選んでいきました。

ちなみに、もし自分好みのアイコンフォントが表示されない時は、Icomoonサイトの一番下に「Add Icon Font Libraly」と表示されていると思いますので、こちらからアイコンを追加してみてください。

iconfont2
有料のものもありますが、有料のものはクリックするとお金払え的なページが出るのでわかります。
無料で十分使えるウェブフォントがありますので、無料で問題ないと思います。

選んだアイコンフォントをダウンロードする

好きなアイコンフォントを選んだら、すぐにダウンロードします。
丁寧にやろうとすると、プログラム名を作ったり、アイコンの名前の変えたりすることもできますが、そういう面倒くさいのは一切スルーして、気に入ったアイコンをサクッとダウンロードしちゃいました。

好きなアイコンを選んだ状態で、右下の「Generate Font」をクリック。
icomoonを使ったアイコンフォント導入方法の流れ
「Generate Font」をクリックすると、一度選んだアイコンの一覧ページが表示されます。
ここでも、アイコンをちょっと修正したりできるようですが、そういうのは面倒なのでスルーして右下の「Downlord」をクリック。

iconfont6
そうすると、【icomoon.zip】というファイルがPCにダウンロードされると思いますので、こちらを解凍します。

fontsフォルダとcssファイルをアップロード

ダウンロードできたicomoon.zipの中にはいくつかファイルが入っていますが、大事なのはfontsフォルダとstyle.cssくらいです。

demo.htmlは、後でフォント名を確認するときに使います。

この時、私のように大雑把な人間はstyle.cssをそのままの名前で使うと、元々のstyle.cssを上書きする可能性がかなり高いので、今回はstyle.css⇒icomoon.cssと先に修正しておきました。

iconfont7
そして、fontsフォルダと名前を修正したstyle.css⇒icomoon.cssを元々のstyle.cssやhtmlファイルが置いてある場所と同じ階層にアップロードします。
（htmlファイルやスタイルシートをフォルダできれいに分けている場合などは相対パスを修正するのを忘れずに。）

アイコンフォントのスタイルシート
尚、元々のstyle.cssに、アイコンフォントのスタイルシートの内容を追記してもいいのですが、アイコンが多いと追記の内容が多くなるので、今回はアイコンフォント用のスタイルシートは別ファイルとしています。

ヘッダーのHTMLを修正する

アイコンフォント用のスタイルシートを読み込んでもらうために、ヘッダーに以下を追記します。
ワードプレスだとheader.phpファイルですね。

私が追記した内容はこちら。
だとなぜかダメでした。
格好悪いけど、うまく読み込めない時はフルパスで指定しちゃってもいいと思います。

記事にアイコンを表示させてみる

設定が終わったら早速記事にアイコンフォントを表示させちゃいましょう^^。
記述は以下の通り。

とspanかiで表示できます。

icon-[icon名]に入れるアイコン名を忘れた～という場合は、最初にダウンロードしたファイルのdemo.htmlを見ればわかります。

iconfont9
ただし、今回はダウンロードしたファイルのうちstyle.css⇒icomoon.cssと修正していますので、demo.html内のスタイルシートを参照している部分をstyle.css⇒icomoon.cssに修正する必要があります。

9行目のスタイルシートの指定を「style.css⇒icomoon.css」に修正するとdemo.htmlが問題なく表示されるはずです。

こうして、アイコン名をきちんと入れて記述すると、以下のようにアイコンフォントがかわいく表示されました^^。




cssで大きさや色、位置なども調整できますが、めんどくさい、とりあえず記事内でさくっと使いたいという場合は、spanタグ内で色や大きさ位置を調整できます。

この記事内では文字の横にアイコンフォントを出すとき以下のように書きました。

例えばこれ。

以上、とりあえず余計なことは一切せずに、簡単にアイコンフォントを導入する方法でした！

MINI Suki Koto Log
アイコンフォント導入したのでなるべく活用していきます^^。とりあえずソーシャルボタンをアイコンフォントで設定してみる予定です。


更新情報をお届けします！(=ФωФ=)

最新情報をお届けします

フォローという手もあります！(=ФωФ=)

同じカテゴリにはこんな記事もあります(=ФωФ=)

Comment





Comment