webアイコンフォント 差し替え 新規追加
IcoMoonは選んだwebアイコンフォント（以下:アイコンフォント）のみダウンロード出来るのでデータが軽いという利点があります（アイコンの種類も豊富でいい感じ、何よりオリジナルが作れるのは言うまでもありません◎）
が、それ故に新しい物を追加したいと言う事も時々起こると思います。
「21時限、22時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法」では４つアイコンフォントを作りWordPress（以下:WP）の「キャンプ場」投稿記事に使いました。
今回は同じキャンプ記事のランタンを新しい物に差し替え、寝袋を新規で追加する方法を書きます。勿論、昔使っていたアイコンフォントもそのまま使えるようにします。
色々な記事に使っているからね
この時間の目的
-
- 既存のwebアイコンフォントと差し替える
- 新しいwebアイコンフォントを追加する
大まかな流れ
1: イラレ、インクスケープ、スクラッチなどでアイコンを描く
まずはおさらいですがイラストを描いて保存する時のポイントです。今回200pxの正方形の中に描きましたが、480pxが良いという記事もありました◎
webアイコンフォント用イラストのポイント
- 正方形の中に描きます（21時限で説明 済）
- 保存形式は svgです（ 〃 ）
- 黒１色で描きます（ 〃 ）
- 線は表示されないのでアウトライン化します
- パスを統合しておいた方が安全です?
以上5つのポイントに基づいて描いたイラスト「ランタン」「寝袋」2つを保存しました。
2: IcoMoonでWebアイコンフォントを生成する
svg形式で保存した「ランタン」「寝袋」2つのアイコンをIcoMoonのImport Iconsで取り込みました。今この２つは選択された状態です。（上の黄色い矢印でクリックすると周りが黄色くなり選択状態になります）
更新したい（現在のサイトで使っている、と言いますか）アイコンフォントも一緒のファイルにしてダンロードしないといけません。更新用データを用意します。
更新したいデータの中のselection.jsonを使用
Import Iconsをクリックしselection.jsonを選択して開きます。
「アイコンの選択が読み込まれました。選択ファイルに〜」と聞かれますのでYesを押します。
前回のものが入りました。ランタン以外を選択したらGenerate Font をクリックします。
更新したいがファイルを捨ててしまっていた場合
IcoMoonからダウンロードしたファイルフォルダが見付からずselection.jsonが取り込めない時の対処法2つです。
3: IcoMoonのキャッシュ機能に頼る
IcoMoonはキャッシュ機能があるので以前のデータが故意に削除していない限り残っています。ただ品番が今サイトで使っているのと変わってしまうのでそこを手作業で合わせるように注意してください。
クリックして書き換えられます。
このデータも消してしまってIcoMoonにイラストが残っていなかった場合は4の方法で◎
4: WPを入れたサーバーから持ってくる
IcoMoonの更新作業をしているという事は既にサーバー管理ツールで中にファイルを入れる作業をしているという事だと思いますので簡単に◎
WPの中の
wp-contentの中の
themesの中の
IcoMoonのfontsフォルダ（や style.css）を入れたテーマを選びます。
fontsフォルダを開きます。（以前作ったものです）
以前入れた4つのファイルの中のicomoon.svgを左の青い書類マークでダウンロードして使います。
IcoMoonのImport Icons をクリックし、今ダウンロードしたicomoon.svg を選択し開きます。
何か聞かれますがYesで。
前回のものが入りました。
品番が以前の物と同じかチェックする
icomoon.svgのファイルで更新をしようとすると他との兼ね合いで品番が違っている事があります。（なので本来はselection.jsonを取り込むのがいいと書きました）
既存のアイコンの品番は故意に変更していない限り大丈夫なのですが（compassの向きはinkscape１年生の解説で必要で変更しました）
オリジナルで作ったアイコンは番号の割り当てが変わる事があります。
品番、tent やe901 などが以前の物と同じかしっかりチェックしてください。
「差し換え」と自分で作った「オリジナル」は特に注意
今回は大丈夫だったのですがインポートの順番によっては①の差し換え用ランタン「lantern」が「lantern1」などになっている場合があります。差し替える訳ですから新しいアイコンを以前使っていたアイコンの品番にしないといけません。
②の追加は新規なのでいいとして、オリジナルで作った物（ここではテント）は品番が前と違っている時があるので要チェックです。IcoMoonの既存のアイコンは（任意に変更していない限り）大丈夫なようです。
以前の品番のチェック方法
昔の品番は前回ダウンロードしたファイルの中のdemo.htmlをクリックするとweb上で見れます。（捨ててしまっていた場合はWPに使った所から見付けるなど）
全ての先頭に付いている「icon-」はこの後ダウンロードしたら自動的に付くのでここでは気にしないでください。
チェックして違う所があったらクリックして書き換え修正します。
品番のチェック、修正が終わったらダウンロードします。ダウンロードしたファイルは圧縮されているので解凍します。
5: WPのサーバーの中からアイコンフォントの旧データを削除する
まずは旧データを削除します。ここまでの詳しい入り方はプログラミング1年生、22時限で書いているのでここでは簡単に。
前回WP公式テーマ：Twenty Fifteenの中に作ったfontsフォルダを開きます。
この中には前回入れたIcoMoonのファイルが入っているので、まずはこれを（ゴミ箱マーククリックで）4つ全部捨てます。
6: WPのサーバーの中にアイコンフォントの新データを入れる
空になったfontsディレクトリ（フォルダと同様の意味です）に新しいファイルをアップロードで入れます。
ファイルを選択、
icomoon.eot 、icomoon.svg 、icomoon.ttf 、 icomoon.woff の4つを1つずつ選択します。
アップロードしてサーバーの操作は終わりです。
次はWPでも少しやる事があります。
WPのスタイルシートに新しいアイコンフォントを追記する
WPの外観＞テーマエディタ＞スタイルシート(style.css)を選択、
一番下まで行って、
新しい「寝袋」のコードのみをコピペします。
ランタンのコードは昔のままでイラストのみ新しくなります。（そうでないと今まで使っていた所に表示されなくなってしまいます◎差し換えです）
テント、火、インスタのコードももちろんそのままです。
ここに貼る「寝袋」のコードはダウンロードしたファイルstyle.cssの中にあります。
（黒い画面で無いなど見え方は違っても問題ありません）目当てのコードをコピーし、
7: 実際に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度左に傾かせて完成とします。
お疲れ様でした◎
8: 上手くいかなかった時のコード検索
残念ながら差し替えが上手く行かずコードを探して手作業で書き換えなくてはいけない時などに知っていると便利な機能です。
webアイコンフォントはWPの投稿の「ビジュアル」の方には表示されないので「テキスト」の方で探すしかなく、
なかなか大変です。実際の投稿表示を見て探す方法もありますがそれよりも「検索機能」を使った方が断然早いです。
投稿画面の「テキスト」（コードが見えている状態）でコマンドとFキーを押すと検索窓が降りてきます。そこに差し替えたい文字を打ち込んでエンターを押すと、この画面にはそれがいくつあるかと文字が背景色付きで表示されます。
「icf-prog」という文字をiconに差し替えたくて検索したらこのページには4つありました。
昔のデータが当たって表示がおかしくなっていたのが
無事、修正できました。
