webアイコンフォント 差し替え 新規追加

IcoMoonは選んだwebアイコンフォント（以下:アイコンフォント）のみダウンロード出来るのでデータが軽いという利点があります（アイコンの種類も豊富でいい感じ、何よりオリジナルが作れるのは言うまでもありません◎）

が、それ故に新しい物を追加したいと言う事も時々起こると思います。

 

 

「21時限、22時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法」では４つアイコンフォントを作りWordPress（以下:WP）の「キャンプ場」投稿記事に使いました。

 

今回は同じキャンプ記事のランタンを新しい物に差し替え、寝袋を新規で追加する方法を書きます。勿論、昔使っていたアイコンフォントもそのまま使えるようにします。

いろんな記事に使っているから修正するのは大変だもんね

 

 

 

 

イラレ、インクスケープ、スクラッチなどでアイコンを描く

 

まずはおさらいですがイラストを描いて保存する時のポイントです。今回200pxの正方形の中に描きましたが、480pxが良いという記事もありました◎

 

以上5つのポイントに基づいて描いたイラスト「ランタン」「寝袋」2つを保存しました。

 

 

IcoMoonでWebアイコンフォントを生成する

 

svg形式で保存した「ランタン」「寝袋」2つのアイコンをIcoMoonのImport Iconsで取り込みました。今この２つは選択された状態です。（上の黄色い矢印でクリックすると周りが黄色くなり選択状態になります）

 

前回作ったアイコンフォントも選択して一緒のファイルにしてダンロードしないといけません。前回のアイコンフォントのデータを取得する方法はA,B 2つ（厳密にはあと１つ、方法C）あるので順番に解説します。

 

A:以前のデータが残っている場合

IcoMoonはキャッシュ機能があるので以前のデータが故意に削除していない限り残っていると思います。

差し替え（ランタン）、新規（寝袋）の他に今まで使っていたアイコンもここで選択してください。ただし、差し替えで不要になる昔のアイコン（ランタン）は選択しません。

今までのものも選択しないとWPの方で表示されなくなってしまいます

 

 

で、もしデータを消してしまってIcoMoonに残っていなかった場合はBの方法で◎

 

 

B:以前作ったicomoon.svgを使う場合

前回IcoMoonでダウンロードしたファイルの中にあるicomoon.svgを使います。

 

IcoMoonでImport Icons をクリックし、icomoon.svg を開きます。

 

ここはYesです。

 

前回のものが入りました。ランタン以外を改めて選択し、先程の2つの新しいアイコンも選択したらGenerate Font をクリックします。

ランタンは新しい物を使うから選択しないんだよね

 

 

品番が以前の物と同じかチェックする

品番、tent やe901 などが以前の物と同じかしっかりチェックしてください。

「差し換え」と自分で作った「オリジナル」は特に注意

今回は大丈夫だったのですがインポートの順番によっては①の差し換え用ランタン「lantern」が「lantern1」などになっている場合があります。差し替える訳ですから新しいアイコンを以前使っていたアイコンの品番にしないといけません。

②の追加は新規なのでいいとして、オリジナルで作った物（ここではテント）は品番が前と違っている時があるので要チェックです。IcoMoonの既存のアイコンは（任意に変更していない限り）大丈夫なようです。

 

 

以前の品番のチェック方法

昔の品番は前回ダウンロードしたファイルの中のdemo.htmlをクリックするとweb上で見れます。（捨ててしまっていた場合はWPに使った所から見付けるなど）

 

全ての先頭に付いている「icon-」はこの後ダウンロードしたら自動的に付くのでここでは気にしないでください。

 

チェックして違う所があったらクリックして書き換え修正します。

 

品番のチェック、修正が終わったらダウンロードします。ダウンロードしたファイルは圧縮されているので解凍します。

 

 

 

IcoMoonのファイルをWPが入っているサーバーに入れます

 

今ダウンロードしたファイルをWPが入っているサーバーに入れます。詳しくはプログラミング1年生、22時限で書いているのでここでは簡単に。

前回WP公式テーマ：Twenty Fifteenの中に作ったfontsフォルダを開きます。

 

 

この中には前回入れたIcoMoonのファイルが入っているので、まずはこれを（ゴミ箱マーククリックで）4つ全部捨てます。

 

ちなみにデスクトップ上のファイルを捨ててしまっていた場合、ここのicomoon.svgをダウンロード（文字左の水色の書類マーククリック）してIcoMoonに取り込む方法（方法C）もあります。

 

空になったfontsディレクトリ（フォルダと同様の意味です）に新しいファイルをアップロードで入れます。

 

ファイルを選択、

 

icomoon.eot 、icomoon.svg 、icomoon.ttf 、 icomoon.woff の4つを1つずつ選択します。

 

アップロードしてサーバーの操作は終わりです。

次はWPでも少しやる事があります。

 

 

WPのスタイルシートに新しいアイコンフォントを追記する

 

WPの外観＞テーマエディタ＞スタイルシート(style.css)を選択、

 

一番下まで行って、

 

新しい「寝袋」のコードのみをコピペします。

ランタンのコードは昔のままでイラストのみ新しくなります。（そうでないと今まで使っていた所に表示されなくなってしまいます◎差し換えです）

テント、火、インスタのコードももちろんそのままです。

 

ここに貼る「寝袋」のコードはダウンロードしたファイルstyle.cssの中にあります。

 

（黒い画面で無いなど見え方は違っても問題ありません）目当てのコードをコピーし、

 

ペースト。ファイルを更新で保存します。

 

 

実際にWPの投稿記事に使ってみます

 

IcoMoonのサイトへ行き、新規のアイコン（ここでは寝袋）のGet codeでHTML,CSSコードを出します。

 

HTMLコードをコピペします。（プログラミング1年生：22時限の投稿記事の続きという想定です）

 

まだ小さいですが②の様に新規のアイコンフォントは表示されたでしょうか。それと同時に①の差し換えたアイコンフォントが自動で新しくなっている事も確かめてください。（当たり前ですが他の場所に使っている物も新しくなっています◎）

 

もし差し換えが上手くいかなかったら品番が昔の物と違ってしまっているかもしれないので、同じになる様修正してください◎

 

 

表示されなかったらスーパーリロード

品番も合っていて更新もしたのにちゃんと表示されない場合、”スーパーリロード”も試してみてください。

スーパー、、、
スーパーリロード。パソコンやブラウザによって違うので調べてみてください◎

 

 

CSSでアイコンフォントの大きさなど変える

最後に新しいアイコンフォントの見栄えを良くします。

先程IcoMoonのGet Codeで開いたCSSのコードを投稿記事のカスタムCSSの欄にコピペします。

そこにfont-size: 50px;など好みの大きさを追記します。
padding-right: 10px;はこのアイコンフォントの右側を10px空けるという指示です。

 

こんな感じになりました。

うーん、寝袋だから横にしたいかも。イラストから書き直さないとダメかな？

傾ける指示のCSSもあるから大丈夫

 

傾けたい時はdisplay: inline-block;とtransform: rotate(-45deg);をこの場合セットで記述します。-45を90に変更すれば右側に90度傾きます。

 

45度左に傾かせて完成とします。

 

お疲れ様でした◎