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

お世話になります。
現在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>

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

よろしくお願いします。

yoshinavi

2018/08/11 22:44

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

t-maekawa

2018/08/12 12:47

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

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

回答1件

ベストアンサー

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

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

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

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

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

css
1@font-face {
2	font-family: "icomoon";
3	src:  url("../fonts/icomoon.eot?gizg5m");
4	src:  url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
5	url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
6	url("../fonts/icomoon.woff?gizg5m") format("woff"),
7	url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
8	font-weight: normal;
9	font-style: normal;
10}