teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問icomoonで設定したフリーアイコンが表示されない

編集履歴

質問編集履歴

1

コードと階層状態を追記しました。

2018/08/12 12:45

投稿

t-maekawa
t-maekawa

スコア44

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,147 @@
3
3
  現在LION MEDIA(子)にてサイトを作成運用しているんですが、トップページの新着一覧や記事本文、それからサイドバーや記事下の関連記事一覧に更新日を表示させたいと考えています。
4
4
 
5
5
  [こちらのサイト](https://thiolog.com/lionmedia-date-modified-display/)を参考にして行い、アイコンの導入については[こちら](https://mutakko.info/post-2101/)のサイトを参考にフォントを追加しました。現在はエラーがでてしまったので元に戻しているんですけど、正しく表示されません。icomoonというサイトを使ってアイコンを新しく追加してアップロードしてcssやphpファイルを変更します。ただ、アイコン自体は表示されて更新日も表示されるんですけど、正しいアイコンではなくて0120のようなアイコンごとに付与された番号が書かれた縦長長方形のアイコン？が表示されます。また、ソーシャルのツイッターとやフェイスブックのアイコンも色分けされてはいるものの、正しく表示されずに番号で表示されます。ブラウザによっても表示が変わります。参考サイトに書かれているとおりにやっているのになぜきちんと表示されないのでしょうか？よろしくお願いします。
6
+
7
+
8
+
9
+ ```ここに言語を入力
10
+
11
+ @charset "UTF-8";
12
+
13
+
14
+
15
+ /*アイコンフォント
16
+
17
+ /************************************************************/
18
+
19
+
20
+
21
+ @font-face {
22
+
23
+ font-family: "icomoon";
24
+
25
+ src: url("../fonts/icomoon.eot?gizg5m");
26
+
27
+ src: url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
28
+
29
+ url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
30
+
31
+ url("../fonts/icomoon.woff?gizg5m") format("woff"),
32
+
33
+ url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
34
+
35
+ font-weight: normal;
36
+
37
+ font-style: normal;
38
+
39
+ }
40
+
41
+ [class^="icon-"], [class*=" icon-"] {
42
+
43
+ font-family: "icomoon";
44
+
45
+ speak: none;
46
+
47
+ font-style: normal;
48
+
49
+ font-weight: normal;
50
+
51
+ font-variant: normal;
52
+
53
+ text-transform: none;
54
+
55
+ -webkit-font-smoothing: antialiased;
56
+
57
+ -moz-osx-font-smoothing: grayscale;
58
+
59
+ }
60
+
61
+ .icon-close:before {content:"\e90e";}
62
+
63
+ ～中略します～
64
+
65
+ .icon-loop:before {content:"\ea2e";} /* 2018.08.12追加 */
66
+
67
+ ```
68
+
69
+ 上記コードはcssフォルダのicon.cssです。該当のアイコンファイルは一つ上の階層のフォルダの中のファイルですのでcssのパスの記述はこれであっていると思います。
70
+
71
+ ![イメージ説明](dd3fe004d1a37d117384f793761e8be4.jpeg)
72
+
73
+ fontsフォルダの中にあるicomoon.svgファイルの中身は
74
+
75
+
76
+
77
+ ```ここに言語を入力
78
+
79
+ <?xml version="1.0" standalone="no"?>
80
+
81
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
82
+
83
+ <svg xmlns="http://www.w3.org/2000/svg">
84
+
85
+ <metadata>
86
+
87
+ <json>
88
+
89
+ <![CDATA[
90
+
91
+ {
92
+
93
+ "fontFamily": "icomoon",
94
+
95
+ "majorVersion": 1,
96
+
97
+ "minorVersion": 0,
98
+
99
+ "version": "Version 1.0",
100
+
101
+ "fontId": "icomoon",
102
+
103
+ "psName": "icomoon",
104
+
105
+ "subFamily": "Regular",
106
+
107
+ "fullName": "icomoon",
108
+
109
+ "description": "Font generated by IcoMoon."
110
+
111
+ }
112
+
113
+ ]]>
114
+
115
+ </json>
116
+
117
+ </metadata>
118
+
119
+ <defs>
120
+
121
+ <font id="icomoon" horiz-adv-x="1024">
122
+
123
+ <font-face units-per-em="1024" ascent="960" descent="-64" />
124
+
125
+ <missing-glyph horiz-adv-x="1024" />
126
+
127
+ <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
128
+
129
+ <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" />
130
+
131
+ ～中略～
132
+
133
+ <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" />
134
+
135
+ <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" />
136
+
137
+ <glyph unicode="&#xe90f;" glyph-name="menu" data-tags="menu" d="M0 874.667h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 149.333h1024v-128h-1024v128z" />
138
+
139
+ <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" />
140
+
141
+ </font></defs></svg>
142
+
143
+ ```
144
+
145
+ となっていてファイル自体は存在しているような感じなのですが、なにかおかしな点はありますでしょうか？
146
+
147
+
148
+
149
+ よろしくお願いします。