LION MEDIAのカスタマイズ・「IcoMoon」を編集してWebフォントを追加しよう

LION MEDIAのカスタマイズ・「IcoMoon」を編集してWebフォントを追加しよう

今回は、LION MEDIAで使用している「IcoMoon」フォントにアイコンを追加する方法を解説します。

LION MEDIAには、デフォルトで16個のアイコンが登録されています。

(現在登録されているアイコン)

これら16個のアイコンに追加していく方法を解説していきます。

LION MEDIAで「IcoMoon」フォントはどこに使われているのか

「IcoMoon」フォントは、ブログのタイトル下に使用されています。

その他にも記事のカテゴリーアイコンやタグアイコン、公開日時等に使用されています。

「IcoMoon」フォントを追加する概要

「IcoMoon」フォントに新しくフォントを追加する大まかな手順を説明します。

  1. サーバーから「icomoon.svg」をダウンロード
  2. 「IcoMoon App – Icon Font, SVG, PDF & PNG Generator」へ
  3. icomoon.svgから既存のフォントをインポート
  4. 追加したいフォントを選択
  5. フォントデータをダウンロード
  6. サーバーにアップロード

「IcoMoon」フォントを追加する

それでは、さっそく「IcoMoon」フォントを追加していきましょう。

この記事の通りにすればLION MEDIAのテーマを使っている方は「IcoMoon」フォントを追加できます。

LION MEDIA以外のテーマを使っている方でも同じようにできます。

 

「icomoon.svg」をダウンロード

「icomoon.svg」をサーバーからダウンロードするには、FTPを使います。

FTPソフトのインストールと使い方は以下を参考にして下さい。

 

FTPソフトでWordPressをインストールしている「fonts」があるディレクトリまで行きます。

「wp-content」-「themes」-「lionmedia」-「fonts」

※LION BLOGやLION MEDIA以外のテーマをお使いの方は、お使いのテーマでfontsがあるディレクトリまで移動して下さい

fontsの中には4つのファイルが入っています。

  •  icomoon.eot
  •  icomoon.svg
  •  icomoon.ttf
  •  icomoon.woff

icomoon.svgファイルをご自分のローカルのパソコンへダウンロードして下さい。

「IcoMoon」フォントにアイコンを追加する

まずは、以下のサイトにアクセスして下さい。

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

IcoMoon App – Icon Font, SVG, PDF & PNG Generatorにアクセスしたら、上の画面になります。

「Import Icons」ボタンを押して先ほどダウンロードした「icomoon.svg」をインポートします。

 

「The glyphs in your SVG font were loaded.Use this font’s metrics and metadata when exporting fonts?」

SVGフォントのグリフが読み込まれました。
フォントをエクスポートするときは、このフォントのメトリックとメタデータを使用しますか?

以前のデータを使用しますか?と聞いていますので「Yes」をクリックします。

 

「icomoon.svg」に登録されているアイコンが表示されます。

 

追加したいアイコンをクリックします。追加したら「selection(1)」になります。

 

追加が終わったら「font」をクリックします。

ダウンロードボタンがあるので「Download」をクリックします。

ここでは2個追加しています。

 

ダウンロードした「icomoon.zip」を解答すると、上のファイルが展開されます。

ここで使うのは「fonts」フォルダ内のファイルのみです。

  •  icomoon.eot
  •  icomoon.svg
  •  icomoon.ttf
  •  icomoon.woff

 

サーバーにアップする

「fonts」フォルダに入っていた4つのファイルをサーバー内の元の場所に上書き保存します。

FTPソフトのインストールと使い方は以下を参考にして下さい。

何があるか分かりませんので、上書き保存される前にバックアップを取っておいて下さい

 

LION MEDIAにアイコンを追加する

サーバーには「fonts」をアップロードしましたので、次は、WordPressのテーマ「LION MEDIA」にアイコンの情報を追加します。

icon.cssを編集

WordPressのダッシュボードから「外観」→「テーマの編集」へ進みます。

 

編集するテーマを選択で「LION MEDIA」を選んで「選択」をクリックします。

 

「css」→「icon.css」を選択します。

icon.cssの最後に追加しています。

追加する1行は以下になります。

 

追加する場合は、以下を参照します。

.icon-loop2:before {content:”\ea2e“;}

.icon-*****:before : loop2を入力する

content:”*****“;  : \ea2eを入力する

「icon.css」に追加したら「ファイルを更新」をクリックします。

 

更新日のアイコンを編集した場合は、以下を参考にして下さい。

 

まとめ

「IcoMoon」は画像より軽いので早く表示されます。また、拡大しても画像ではなくフォントなのでキレイに表示されます。

使いたいフォントがあれば、画像より「IcoMoon」を使うことをお薦めします。

使うか使わないかは人それぞれですし、好みもありますので「IcoMoon」を使いたい場合は、この記事を参考にして下さい。

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事