CSS先日、CSSのフレームワーク「Bootstrap」で多数のアイコンが利用できるGlyphiconがありますが、このアイコンで文字化けというか、四角い文字になってしまう問題が発生しました。原因はフォントのパスが変わったことが原因だったのですが、これがなかなか苦戦したので下記に明記しておきます。前提条件まずは今回の前提条件を下記に明記しておきます。58.0.2まぁ、こんなもんでいいかと思います。大事なのはBootstrapのバージョンかな。通常、Bootstrapのサイトからダウンロードして、サイトを構築すると下記のようなファイル構成になるかと思います。npm.jsそして、index.html内のソースはというと、ただ単にGlyphiconを表示させるものとするとか気になると思います。src="js/bootstrap.min.js"></script></body></html>で、上記内容を表示させると下記のようなページが表示されます。BootstrapのGlyphiconを表示パスを変更さて、今回はBootstrapの各フォルダ(ファイル)を下記のように変更しました。サイトの構成上、各ファイルの位置を変更することは多々あると思います。npm.js見てもらうとわかると思いますが、「css」「fonts」「js」の各フォルダ内に「bootstrap」というフォルダを間に噛ました場合とします。するとindex.htmlのパスも変更する必要があるのでヘッダータグ内のlinkタグと最後のscriptタグを下記のように変更します。src="js/bootstrap/bootstrap.min.js"></script></body></html>さて、これでページを表示すると下記のように四角い文字の文字化け状態で表示されます。これはブラウザにより表示形式は異なると思いますが、いずれにしても正しいGlyphiconは表示されません。文字化けしたGlyphiconのアイコン原因この化けてしまった原因ですが、BootstrapのCSSディレクトリ内のbootstrap.css(もしくはbootstrap.min.css)で260行目付近に下記のようなフォントを指定している箇所があります。format('svg');}これはBootstrapで出力する今回のGlyphiconアイコンなどのフォントファイルを指定しているところなのですが、今回のパスを変更したことで、パスのズレが発生して正常に表示されなくなってしまったのです。対策この問題を解決する方法としてbootstrap.css(もしくはbootstrap.min.css)の上記パスを変更すれば解決はするのですが、Bootstrapのコアファイルはできるだけ変更・編集をしたくはありません。いうことで「css」ディレクトリ内に@font-faceを再指定するファイルを置くことで解決させたいと思います。format('svg');}さらにindex.html内に上記ファイルのリンクを下記のように貼ります。:</html>これにより正常に表示されます。この時注意が必要で「font-face.css」ファイル内で「font-family」を指定しています。当初、これは省略していいだろうと思って「font-face.css」ファイル内の「@font-face」内に「font-family」を書かなかったら、まったく表示されませんでした。「font-family」は書く必要がありますので注意が必要です。最後にWebをやっている人ならそれほど難しいものではないと思いますが、引っかかると全然解決できないものです。上記内容が多少なりとも参考になれば幸です。コメントをキャンセルメールアドレスが公開されることはありません。Accessを使った業務用ソフトウェアの提供やホームページ、ブログシステムの制作、Webを使った業務システムの開発を静岡県浜松市で行っています。