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

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

ただいまの
回答率

90.01%

icomoonで設定したフリーアイコンが表示されない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,071

t-maekawa

score 38

お世話になります。
現在LION MEDIA(子)にてサイトを作成運用しているんですが、トップページの新着一覧や記事本文、それからサイドバーや記事下の関連記事一覧に更新日を表示させたいと考えています。
こちらのサイトを参考にして行い、アイコンの導入についてはこちらのサイトを参考にフォントを追加しました。現在はエラーがでてしまったので元に戻しているんですけど、正しく表示されません。icomoonというサイトを使ってアイコンを新しく追加してアップロードしてcssやphpファイルを変更します。ただ、アイコン自体は表示されて更新日も表示されるんですけど、正しいアイコンではなくて0120のようなアイコンごとに付与された番号が書かれた縦長長方形のアイコン?が表示されます。また、ソーシャルのツイッターとやフェイスブックのアイコンも色分けされてはいるものの、正しく表示されずに番号で表示されます。ブラウザによっても表示が変わります。参考サイトに書かれているとおりにやっているのになぜきちんと表示されないのでしょうか?よろしくお願いします。

@charset "UTF-8";

/*アイコンフォント
/************************************************************/

@font-face {
    font-family: "icomoon";
    src:  url("../fonts/icomoon.eot?gizg5m");
    src:  url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
    url("../fonts/icomoon.woff?gizg5m") format("woff"),
    url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: "icomoon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-close:before {content:"\e90e";}
~中略します~
.icon-loop:before {content:"\ea2e";} /* 2018.08.12追加 */


上記コードはcssフォルダのicon.cssです。該当のアイコンファイルは一つ上の階層のフォルダの中のファイルですのでcssのパスの記述はこれであっていると思います。
イメージ説明
fontsフォルダの中にあるicomoon.svgファイルの中身は

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<json>
<![CDATA[
{
    "fontFamily": "icomoon",
    "majorVersion": 1,
    "minorVersion": 0,
    "version": "Version 1.0",
    "fontId": "icomoon",
    "psName": "icomoon",
    "subFamily": "Regular",
    "fullName": "icomoon",
    "description": "Font generated by IcoMoon."
}
]]>
</json>
</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="calendar" data-tags="calendar" d="M768 789.333v170.667h-85.333v-170.667h-341.333v170.667h-85.333v-170.667h-256v-853.333h1024v853.333h-256zM938.667 21.333h-853.333v682.667h853.333v-682.667zM176.213 527.872h165.12v-165.205h-165.12v165.205zM176.213 277.333h165.12v-165.205h-165.12v165.205zM688.128 527.872h165.205v-165.205h-165.205v165.205zM682.667 271.872h165.205v-165.205h-165.205v165.205zM426.667 533.333h165.205v-165.205h-165.205v165.205zM426.667 271.872h165.205v-165.205h-165.205v165.205z" />
~中略~
<glyph unicode="&#xe90d;" glyph-name="instagram" data-tags="instagram" d="M724.565-64h-425.131c-165.12 0-299.435 134.315-299.435 299.435v425.131c0 165.12 134.315 299.435 299.435 299.435h425.131c165.12 0 299.435-134.315 299.435-299.435v-425.131c0-165.12-134.315-299.435-299.435-299.435zM299.435 864.512c-112.469 0-204.032-91.477-204.032-203.947v-425.131c0-112.469 91.477-204.032 204.032-204.032h425.131c112.469 0 204.032 91.477 204.032 204.032v425.131c0 112.384-91.477 203.947-204.032 203.947h-425.131zM849.493 721.067c0-35.252-28.577-63.829-63.829-63.829s-63.829 28.577-63.829 63.829c0 35.252 28.577 63.829 63.829 63.829s63.829-28.577 63.829-63.829zM512 183.296c-145.92 0-264.704 118.784-264.704 264.704 0 146.005 118.784 264.704 264.704 264.704s264.704-118.699 264.704-264.704c0-145.92-118.784-264.704-264.704-264.704zM512 617.131c-93.355 0-169.216-75.776-169.216-169.131s75.861-169.131 169.216-169.131 169.131 75.776 169.131 169.131-75.776 169.131-169.131 169.131z" />
<glyph unicode="&#xe90e;" glyph-name="close" data-tags="close" d="M1024.085 26.453l-421.547 421.547 421.461 421.461-90.539 90.539-421.461-421.461-421.461 421.461-90.539-90.539 421.461-421.461-421.376-421.376 90.453-90.624 421.461 421.461 421.376-421.461z" />
<glyph unicode="&#xe90f;" glyph-name="menu" data-tags="menu" d="M0 874.667h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 149.333h1024v-128h-1024v128z" />
<glyph unicode="&#xea2e;" glyph-name="loop" data-tags="loop, repeat, player, reload, refresh, update, synchronize, arrows" d="M889.68 793.68c-93.608 102.216-228.154 166.32-377.68 166.32-282.77 0-512-229.23-512-512h96c0 229.75 186.25 416 416 416 123.020 0 233.542-53.418 309.696-138.306l-149.696-149.694h352v352l-134.32-134.32zM928 448c0-229.75-186.25-416-416-416-123.020 0-233.542 53.418-309.694 138.306l149.694 149.694h-352v-352l134.32 134.32c93.608-102.216 228.154-166.32 377.68-166.32 282.77 0 512 229.23 512 512h-96z" />
</font></defs></svg>


となっていてファイル自体は存在しているような感じなのですが、なにかおかしな点はありますでしょうか?

よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/08/12 00:58

    複数のユーザーから「問題・課題が含まれていない質問」という意見がありました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

  • yoshinavi

    2018/08/12 07:44

    >参考サイトに書かれているとおりにやっているのになぜきちんと表示されないのでしょうか? →今のコードも何もない状態では、誰も検証できないので回答もつかず、「書かれたとおりにやっていないからでは?」としか言えません。 ファイルの構造や関連するコード、キャプチャー画像等を提示されると回答が得れるかと思います。

    キャンセル

  • t-maekawa

    2018/08/12 21:47

    ご指摘ありがとうございます。コードと階層画像等追記させていただきました。現在は縦長方形・数字も表示されません。

    キャンセル

回答 1

checkベストアンサー

+1

エラーは要は「本来のアイコンが、番号と長方形で表示されてしまうこと」だけですよね。

するとおそらくCSSからのデータ読み込みに起因するように察せられます。

指定されたアイコンを読み込もうとして、でもそのデータがないときに、番号と長方形で表示されるので。

そんなわけで、➀データ読み込み先と➁データの有無のご確認が必要です。順にいきましょう。

➀読み込み先の確認
icomoonの利用で躓きがちなな部分です。データを入れたディレクトリ(フォルダ)の場所と、下記CSSでの読み込みの場所がきちんと一致しているかどうかをご確認頂くと、一歩解決に近づくのではないかと思います。

@font-face {
    font-family: "icomoon";
    src:  url("../fonts/icomoon.eot?gizg5m");
    src:  url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
    url("../fonts/icomoon.woff?gizg5m") format("woff"),
    url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

➁データの有無の確認
もし➀がきちんと一致していれば、次はディレクトリに入っているデータの中にそのアイコンが存在していないことが候補に挙がります。

お使いになりたいデータは、icomoonサイトからダウンロードしたファイルの中に入っているでしょうか。

その辺もご確認頂くと良さそうです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/08/12 21:33

    ありがとうございます。
    現在のコード内容とパス等を追記します
    他のフェイスブックやツイッターのアイコンは正しく表示されていますが、いろいろさわってみたら今度はアイコン自体が表示されなくなりました。

    キャンセル

  • 2018/08/13 17:13

    パスがあっていて、フェイスブックやツイッターのアイコンは呼べている。ということならば➁でしょうね。データの中に目的のアイコンが存在しているかどうか、改めてご確認なさるのがよろしいかと存じます。

    キャンセル

  • 2018/08/13 18:46

    ありがとうございます。確認方法がわかりませんけど、調べてみます。

    キャンセル

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

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