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

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

新規登録して質問してみよう
ただいま回答率
85.49%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1699閲覧

icomoonで設定したフリーアイコンが表示される時とされないときがある。

t-maekawa

総合スコア44

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/13 06:33

お世話になります。3サイト運営しておりまして、3サイトとも同じ様にicomoonでアイコンを設定して表示させています。お陰様で表示されるようになったのですが、表示されたりされなかったり、そもそも表示自体されなかったりと不安定なのです。例えばサイトAではトップページに新着一覧でも更新日・アイコンが表示され、サイドバーも同様、記事本文も同様に表示されます。サイトBではアイコンは表示されずにサイトAと同じような表示状態(アイコンのみ非表示)。サイトCではそもそも何もしていなかったように、何も表示されない、といった感じです。時間をおくとA~Cの状態が入れ替わります。原因としては何が考えられますでしょうか?3サイトとも同じテーマを使っております。
サイトA

サイトB

サイトC
となります。
よろしくお願いします。
以下、前回質問の内容を記載しています。
・・・・・・・・・・・・・・・・・・・・・・・・・・・

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

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

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問