質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 723

yukiii

score 12

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

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を使用しています。

教えていただきたいこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

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

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

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

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

<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">
<defs>

<!-- 必要なアイコン -->
<symbol id="icon-in" viewBox="0 0 16 16">
<title>in</title>
<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>
</symbol>

</defs>
</svg>


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

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

サンプル

demo.htmlのダウンロード方法

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

イメージ説明

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/11 18:47

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

    キャンセル

  • 2019/07/12 01:44

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

    キャンセル

  • 2019/07/12 02:44

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

    キャンセル

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る