アイコンフォント 差し替え 新規追加
IcoMoonは選んだアイコンフォントのみダウンロード出来るのでデータが軽いという利点があります（何よりオリジナルが作れるのは言うまでもありません◎）が、それ故に新しい物を追加したいと言う事も起こると思います。
「21時限、22時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法」では４つアイコンフォントを作りWordPress（以下:WP）の「キャンプ場」投稿記事に使いました。
今回は「キャンプ場2022」記事のランタンを新しい物に差し替え、「〜レンタル」の右にカブト虫のアイコンを新規で追加する方法を書きます。
（１）差し替えたランタン、（２）新規のカブトムシです。勿論、昔使っていたアイコンもそのまま使えるようにします。
色々な記事に使っているからね
この時間の目的
- 既存のアイコンフォントと差し替える
- 新しいアイコンフォントを追加する
大まかな流れ
- インクスケープ、スクラッチ、イラストレーターなどでアイコンを描く
- 旧データをIcoMoonに取り込んで１と合わせて新データにする
- 旧アイコンデータがIcoMoonに残っていない時の対処法A：selection.jsonを使用
- 旧アイコンデータがIcoMoonに残っていない時の対処法B：WPのサーバーから持って来る
- 新旧アイコンの差し替え
- WPのサーバーの中からアイコンフォントの旧データを削除する
- WPのサーバーの中にアイコンフォントの新データを入れる
- WPでスタイルシートに新アイコンフォントデータを追記する
- WPのテーマを変えると表示されなくなるので注意
- アイコンが表示されなかったらスーパーリロードやキャッシュの削除
- 表示されなかった時のコード検索
１：インクスケープ、スクラッチ、イラストレーターなどでアイコンを描く
まずはおさらいですがイラストを描いて保存する時のポイントです。今回200pxの正方形の中に描きましたが、480pxが良いという記事もありました◎
アイコンフォント用イラストのポイント
- 正方形の中に描きます（21時限で説明 済）
- 保存形式は svgです（ 〃 ）
- 黒１色で描きます（ 〃 ）
- 線は表示されないのでアウトライン化します
- パスを統合しておいた方が安全です?
以上5つのポイントに基づいて描いたイラスト「ランタン」「カブト虫」2つを保存しました。
2: 旧データをIcoMoonに取り込んで１と合わせて新データにする
IcoMoonのサイトを開きます。今までのWPにはこの８個のアイコンを使っていたとします。（”旧アイコン”とします）ここにランタンとカブトムシを追加します。
新しいアイコンは右上のハンバーガーボタン＞Import to Set で同じグループに入れられます。
こんな状態になります。全部で10個です（”新アイコン”とします）。Bが新規追加でAはこの後A’に差し替えます。全て選択したら右下の(Generate)Font を押します。
３: 旧アイコンデータがIcoMoonに残っていない時の対処法A：selection.jsonを使用
旧アイコンがIcoMoonに残っていなかったらどうすればいいの？
いくつか方法があります◎
旧アイコンをダウンロードした時のフォルダの中のselection.jsonを使います。
IcoMoonのImport Icons ＞開く でこのファイルを取り込みます。
「アイコンの選択が読み込まれました。〜」と聞かれますのでYesを押します。
このファイルも見つからない時は？
4: 旧アイコンデータがIcoMoonに残っていない時の対処法B：WPを入れたサーバーから持ってくる
WPでのIcoMoonの更新作業をしているという事は既にサーバー管理ツールで中にファイルを入れる作業をしているという事だと思いますので簡単に◎
WPの中の
wp-contentの中の
themesの中の
IcoMoonのfontsフォルダ（や style.css）を入れたテーマを選びます。（ここはどんなテーマをいくつ入れているかで人それぞれです）
fontsフォルダを開きます。（旧アイコンを作った時に作ったフォルダです）
4つのファイルの中のicomoon.svgを左の青い書類マークでダウンロードして使います。
IcoMoonのImport Icons ＞今ダウンロードしたicomoon.svg を選択、開きます。
何か聞かれますがYesで完了です。
全て選択して右下の Generate Font を押した所から始めます。
5：新旧アイコンの差し替え
AのlanthanumをコピーしてA’にペーストします。
ここポイントです◎
ランタンをサイトに表示する時 lanthanum のクラス名を使用していたので新しい（差し替え用）A’の名前も同じにしないと正しく表示されません。
こうします。そして不要になった旧アイコンAは×マークで削除します。
削除しても残っています（上）ので安心してください。今回ダウンロードする中から削除しただけです。と言う事で合計9個（Selection(9)）のアイコンを右下Downloadでダウンロードします。
圧縮されているので解凍します。フォルダの中身です。まずはFontsフォルダの中の４つのファイルを入れ替える作業です。
6: WPのサーバーの中からアイコンフォントの旧データを削除する
その前に旧データを削除します。ここまでの詳しい入り方はプログラミング1年生、22時限で書いているのでここでは簡単に。
WP公式テーマ：Twenty Fifteen(Child)の中に作ったfontsフォルダを開き中の４つのファイルをゴミ箱マークで削除します。
7: WPのサーバーの中にアイコンフォントの新データを入れる
空になったfontsディレクトリ（フォルダと同様の意味です）に先程IcoMoonでダウンロードしたファイルをアップロードで入れます。
「ファイルを選択」を１つずつ押して４つ入れたら＞アップロード
入りました。１つ上（階層）のディレクトリに移動すると、
style.cssファイルがありこれも更新します。ここで開いてもいいのですがWPの方でやろうと思うのでこちらのサーバーでの操作は終わりにします。
8:WPでスタイルシートに新アイコンフォントデータを追記する
WPへ行って外観＞テーマエディター＞スタイルシート(style.css)を右のテーマファイルから選択します。
１〜５行目（ここは入れたテーマによって変わります）オレンジ色で Theme Name: twentyfifteen Child〜など書いてある下には前回入れたIcoMoonのstyle.cssの内容が入っています。
このテーマ情報を削除すると「注意」が出るのでここは残しておきましょう
「ここから」下から〜
「ここまで」を削除します。
”IcoMoonここから追記”以下は自分で加えたCSSです。私はここでアイコンの色やサイズをデフォルトで決めてしまっているのでこのようになっています。特別に変更したい時は投稿記事ごとの「カスタムCSS」に記入もします。
新しいIcoMoonのファイルの中のstyle.cssを全部コピーします。
このような編集ソフトを入れていなくてもテキストエディットでも開けますし（見え方は違います）ファイルをwebサイトにぐりっと持って行っても表示されます。
削除した部分にペーストし「ファイルを更新」します。これで準備完了です。
旧style.css と 新style.css はアイコンの数だけでなくurl「？」の後の部分も変更されています。なのでstyle.cssファイルに新しいアイコン、差し替えたアイコンだけを追記する修正では正しく表示されないアイコンが出てしまいますので全部コピペで入れ替えます。
でも自分で追記した部分は残した方がいいんだよね
今まで書いた記事にアイコンがちゃんと表示されているか確認します。
ランタンは手描きから新しい物にちゃんと差し変わりました。寝袋や火のアイコンは変更前と同様に表示されているので成功です。この記事の編集画面に行って「キャンプ用品レンタル」の右に新規で入れたカブト虫を表示しようと思います。
テキストタブをクリックして<i class="icon-beetle"></i>を記述、
まだ大きさなどの指定をしていないため、黒で小さく表示されました。
外観＞テーマエディターで先程のstyle.cssを開きフォントサイズ、カラー指定などをすれば、
今後このテーマ内（今回はtwentyfifteen Child）で記事を書いて<i class="icon-beetle"></i>を記述すると茶色#b57519 でサイズ5rem のカブト虫が表示されます。
9:WPのテーマを変えると表示されなくなるので注意
今回はtwentyfifteen ChildにサーバーからIcoMoonのファイルを入れたのでこうして表示されますが、
外観＞テーマ で有効にするテーマをLightningなど他の物に変更すると、
このテーマの中にはファイルを置いていないので当然アイコンは表示されません。
なのでテーマを変更する時はIcoMoonのFontsフォルダ（その中の４つのファイル）を移動や複製して入れるのを忘れずにです
10:アイコンが表示されなかったらスーパーリロードやキャッシュの削除
こんな感じなどちゃんと表示されない場合スーパーリロードやキャッシュの削除も試してみてください。アイコンフォントに関してはこれをしないと表示されない事が度々ありました。それから半日以上かかった場合も。
スーパー、、、
スーパーリロード。パソコンやブラウザによって違うので調べてみてください
11:表示されなかった時のコード検索
残念ながら差し替えが上手く行かずコードを探して手作業で書き換えなくてはいけない時などに知っていると便利な機能です。
webアイコンフォントはWPの投稿の「ビジュアル」の方には表示されないので「テキスト」の方で探すしかなく、
なかなか大変です。実際の投稿表示を見て探す方法もありますがそれよりも「検索機能」を使った方が断然早いです。
投稿画面の「テキスト」（コードが見えている状態）でコマンドとFキーを押すと検索窓が降りてきます。そこに差し替えたい文字を打ち込んでエンターを押すと、この画面にはそれがいくつあるかと文字が背景色付きで表示されます。
「icf-prog」という文字をiconに差し替えたくて検索したらこのページには4つありました。
昔のデータが当たって表示がおかしくなっていたのが
無事、修正できました。
最後に少しだけ、アイコンを傾けたい（回転）時のCSSの書き方です。
寝袋を左に45度傾けてらしくします。
と同時に同じアイコンでありながら上の寝袋は真っ直ぐなままで下の寝袋を傾かせる方法も説明します。
真っ直ぐな方はIcoMoonのGet code のHTML をそのまま貼り付けています。傾いている方はそこにrotate(回転)というクラス名を追加しました。
この追加したクラス名に対してCSSを書く事でこの寝袋だけ傾ける事が出来ます。この投稿記事にだけ使うので下にある（プラグインで入れた）カスタムCSSエリアに書きました。
傾けたい時はdisplay: inline-block;とtransform: rotate(-45deg);をこの場合セットで記述します。-45を90に変更すれば右側に90度傾きます。
色と大きさの記述が無いけど？
それはデフォルトにしたかったから 外観＞テーマエディターのstyle.cssファイルにすでに書いていたのよ
