WordPress（LION MEDIA）でのIcoMoonアイコン追加の作業を行なったが、表示されない

実現したいこと・試したこと・エラーの内容

WordPress（LION MEDIA）でのIcoMoonアイコン追加の作業を行なったのですが、追加したアイコンが表示されず、困っています。
作業は、こちら「https://mutakko.info/post-2101/」をほぼ参考にさせていただいて行いました。
一部違う工程としては、目次「3.2. 「IcoMoon」フォントにアイコンを追加する」で、追加したいアイコンのみでなく、もともと「icomoon.svg」にデフォルトで入っていた16個のアイコンも選択し、ダウンロードを行なったことです。
このページでは選択したアイコン（ここではhomeとloop2）のみになっていますが、それだとダウンロード→フォルダをサーバーにアップロードした際に、デフォルトで入っていた16個のアイコンも消えてしまうためです。
（この参考ページとは一部違った工程の作業をする前に、ダウンロードしたいアイコンのみを選択するページ通りの作業も行なっていますが、アイコンは表示されませんでした。）

このIcoMoonの追加作業を行なった理由は、LION MEDIAをカスタマイズしてWordPressブログの更新日時を表示させる際に、「loop2」のアイコンを更新日時とともに表示させたかったためです。
「loop2」のアイコン＋更新日時の表示については、こちら「https://mutakko.info/post-1844/」を参考にさせていただき行っていますが、更新日時は表示されるものの、アイコンのみ表示できません。

作業環境

FTPにはFileZillaを使用しています。

教えていただきたいこと

上記のウェブサイトに書かれている作業内容通りに行えば問題なく表示されるものなのか、まずは教えていただけると嬉しいです。
その上で、問題が生じそうな箇所があれば、教えていただきたいです。
問題ないようであれば、自分の作業内容をもう少し詳しく説明したいと思います。

行動規範の内容に同意します

回答2件

ディレクトリとかややこしいので、SVGでやった方が簡単だし早いし綺麗ですよ。

➀ダウンロードした「icomoon.zip」を解答。

➁demo.htmlをテキストエディタで開く。

➂以下みたいなのがあるのでコピーして、HTMLファイル（header.phpかな?）の<body>直下に張り付ける。

html
1<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2<defs>
3
4<!-- 必要なアイコン -->
5<symbol id="icon-in" viewBox="0 0 16 16">
6<title>in</title>
7<path d="M15 7c-0.553 0-1 0.448-1 1v6h-12v-6c0-0.552-0.447-1-1-1s-1 0.448-1 1v7c0 0.552 0.447 1 1 1h14c0.553 0 1-0.448 1-1v-7c0-0.552-0.447-1-1-1zM9 7v-6.122c0-0.485-0.447-0.878-1-0.878s-1 0.393-1 0.878v6.122h-3l4 4 4-4h-3z"></path>
8</symbol>
9
10</defs>
11</svg>

➃あとはお好きなところに下記を書けばアイコンが表示されます。

<svg class="icon icon-in"><use xlink:href="#icon-in"></use></svg>

サンプル

###demo.htmlのダウンロード方法
まずここ（https://icomoon.io/app/#/select）にアクセスして、下記➀➁➂でダウンロードしてください。

投稿2019/07/09 19:56

編集2019/07/10 17:00

narutona

総合スコア23

退会済みユーザー

2019/07/11 16:22 編集

ご回答ありがとうございます。サンプルページまで作っていただき、助かります。ご教授いただいた方法で試みてみたのですが、①②の工程まではできたのですが、③で開いたdemo.htmlのファイル中に同じようなコードを見つけることができず、以下のようなコードが表示されてしまいました。方法が間違っていたらすみません。 -------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <meta name="Generator" content="Cocoa HTML Writer"> <meta name="CocoaVersion" content="1504.83"> <style type="text/css"> p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 13.0px; font: 11.0px '.AppleSystemUIFont'; color: #000000; -webkit-text-stroke: #000000} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 11.0px '.AppleSystemUIFont'; color: #000000; -webkit-text-stroke: #000000} p.p5 {margin: 0.0px 0.0px 12.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000} span.s1 {font-kerning: none} span.s2 {font: 20.0px Times; font-kerning: none} span.s3 {font-kerning: none; background-color: #ffffff} span.s4 {font: 12.0px Times; font-kerning: none} span.s5 {font: 11.0px '.Hiragino Kaku Gothic Interface'; font-kerning: none; background-color: #ffffff} span.s6 {font: 12.0px Times; text-decoration: underline ; font-kerning: none; color: #0000ee; -webkit-text-stroke: 0px #0000ee} </style> </head> <body> <h1 style="margin: 0.0px 0.0px 16.1px 0.0px; line-height: 28.0px; font: 24.0px Times; color: #000000; -webkit-text-stroke: #000000">Font Name: icomoon (Glyphs: 17)</h1> <h1 style="margin: 0.0px 0.0px 16.1px 0.0px; line-height: 28.0px; font: 24.0px Times; color: #000000; -webkit-text-stroke: #000000">Grid Size: Unknown</h1> icon-calendar e900  liga: icon-facebook e901  liga: icon-folder （中略） <h1 style="margin: 0.0px 0.0px 16.1px 0.0px; line-height: 28.0px; font: 24.0px Times; color: #000000; -webkit-text-stroke: #000000">Font Test Drive</h1> Font Size: px Generated by <a href="https://icomoon.io/app">IcoMoon</a> </body> </html> --------------------

narutona

2019/07/10 16:56

➀がおかしいですね。demo.htmlはicomoonのサイトからダウンロードしてくださいな。

narutona

2019/07/10 17:01

ダウンロード方法を回答に追記しましたのでご参考にどうぞ。うまくいくといいですね。

退会済みユーザー

2019/07/10 17:53

さらにご教授ありがとうございます。僕が上記に書き出したdemo.htmlは確かにicomoonのサイトからダウンロードしたものですが、追記していただいた「demo.htmlのダウンロード方法」では②Generate SVG Moreからダウンロードしたものではなく、右側の“Selection”を挟んで一つ隣の“Ganerate Font”からダウンロードしたフォルダの中に入っていたものでした。（質問内容にある参考にさせていただいていた「https://mutakko.info/post-2101/」の方の方法ではそちらのダウンロード方法だったため） narutona様の方法でダウンロードしたdemo.htmlにはご教授いただいた内容のようなコードは確かに入っていたのですが、今度は手順③の「HTMLファイル（header.phpかな?）の<body>直下に張り付け」でつまづきました。「HTMLファイル（header.phpかな?）」が見つかりません。僕の勉強不足だと思います。ブログを始めてコードをいじり始めたばかりで、初歩的なHTML、CSSの知識しかないので、そもそもWordPress（LION MEDIA）でのIcoMoonアイコン追加が僕には敷居が高いのでしょう。こちらの記事が他の方の参考になればと思います。本当にありがとうございます。

narutona

2019/07/11 09:47

最初はみんなそうですよ。ファイルジラは使えてるんですよね？wp-content→themes→テーマ名→header.phpってありませんか？

退会済みユーザー

2019/07/11 16:44

再度のご回答ありがとうございます。ここの方々皆さんとっても優しいですね・・・涙そして、本当に、とっっってもお恥ずかしい話なのですが。 header.phpはおっしゃられていた場所に見つかりました。そして、今回narutona様に紹介していただいた方法で行う前に、実は解決しました・・・諦めてしばらくいじっていなかったのですが、半日ほど経ってサイトを見てみると、「あれ、表示されてる・・・！？」試しに、バックアップを取っていた本来の「wp-content」-「themes」-「lionmedia」-「fonts」の中身（追加したいicomoonアイコンは入っていないデータ）をアップロード、【キャッシュクリア】の後にリロードすると、追加したいicomoonアイコンのみ非表示に。次に、追加したいicomoonアイコンの入った新たなダウンロードデータを再度アップロード【キャッシュクリア】の後にリロード。「表示・・・されてる・・・！」実は、icomoonアイコン追加の各種作業後、【キャッシュクリア】は行わずにリロードだけをして作業確認を行なっていたのですが、それが原因だったようです。かなーーーり悩んだのに、「え、そんなこと！？」と拍子抜けするやら、嬉しいやら、がっかりするやらです。それにしても、その他のカスタマイズではリロードだけでも反映されるものなのに、この作業のみそれほど反映されるのに時間がかかるものなのか・・・なぜ？？と思っているところです。この度は本当にありがとうございました。

narutona

2019/07/11 17:44

よかったですね~！けっきょく混乱させてしまっただけでしたね…笑「その他カスタマイズと反映時間」については詳細不明なのであくまで一般論ですが、PHPならサーバーの設定によりますし、CSSやJSならサーバーとブラウザと読み込み方法の設定によります。ではでは。

行動規範の内容に同意します

ベストアンサー

下記でnarutona様が別の方法をご教授していただいていますが、それを行う前に自己解決いたしましたので、報告いたします。
表示されなかった原因は、お恥ずかしいのですが、単に反映に時間がかかっていた、それだけでした。
キャッシュクリアののちにページをリロードするとすぐ反映されました。
他のカスタマイズはリロードのみですぐ反映されていたのですが、テーマエディターで直接コードをいじった時はキャッシュクリアののちに動作確認をしよう、と教訓になりました。
初歩的なことでお騒がせいたしました。

投稿2019/07/11 16:56

退会済みユーザー

総合スコア0