Bootstrapの四角い文字化け

先日、CSSのフレームワーク「Bootstrap」で多数のアイコンが利用できるGlyphiconがありますが、このアイコンで文字化けというか、四角い文字になってしまう問題が発生しました。

原因はフォントのパスが変わったことが原因だったのですが、これがなかなか苦戦したので下記に明記しておきます。

前提条件

まずは今回の前提条件を下記に明記しておきます。

  • OS:CentOS7
  • Webサーバー:Apache 2.4.6
  • Bootstrap:Ver. 3.3.7
  • ブラウザ:Firefox 58.0.2

まぁ、こんなもんでいいかと思います。大事なのはBootstrapのバージョンかな。

通常

通常、Bootstrapのサイトからダウンロードして、サイトを構築すると下記のようなファイル構成になるかと思います。

.
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── index.html
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── npm.js

そして、index.html内のソースはというと、ただ単にGlyphiconを表示させるものとするとか気になると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<p>
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
    <br>
    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</p>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

で、上記内容を表示させると下記のようなページが表示されます。

BootstrapのGlyphiconを表示

BootstrapのGlyphiconを表示

パスを変更

さて、今回はBootstrapの各フォルダ(ファイル)を下記のように変更しました。サイトの構成上、各ファイルの位置を変更することは多々あると思います。

.
├── css
│   └── bootstrap
│       ├── bootstrap-theme.css
│       ├── bootstrap-theme.css.map
│       ├── bootstrap-theme.min.css
│       ├── bootstrap-theme.min.css.map
│       ├── bootstrap.css
│       ├── bootstrap.css.map
│       ├── bootstrap.min.css
│       └── bootstrap.min.css.map
├── fonts
│   └── bootstrap
│       ├── glyphicons-halflings-regular.eot
│       ├── glyphicons-halflings-regular.svg
│       ├── glyphicons-halflings-regular.ttf
│       ├── glyphicons-halflings-regular.woff
│       └── glyphicons-halflings-regular.woff2
├── index.html
└── js
    └── bootstrap
        ├── bootstrap.js
        ├── bootstrap.min.js
        └── npm.js

見てもらうとわかると思いますが、「css」「fonts」「js」の各フォルダ内に「bootstrap」というフォルダを間に噛ました場合とします。
そうするとindex.htmlのパスも変更する必要があるのでヘッダータグ内のlinkタグと最後のscriptタグを下記のように変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
        :
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
        :
</head>

<body>
        :
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

さて、これでページを表示すると下記のように四角い文字の文字化け状態で表示されます。これはブラウザにより表示形式は異なると思いますが、いずれにしても正しいGlyphiconは表示されません。

文字化けしたGlyphiconのアイコン

文字化けしたGlyphiconのアイコン

原因

この化けてしまった原因ですが、BootstrapのCSSディレクトリ内のbootstrap.css(もしくはbootstrap.min.css)で260行目付近に下記のようなフォントを指定している箇所があります。

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

これはBootstrapで出力する今回のGlyphiconアイコンなどのフォントファイルを指定しているところなのですが、今回のパスを変更したことで、パスのズレが発生して正常に表示されなくなってしまったのです。

対策

この問題を解決する方法としてbootstrap.css(もしくはbootstrap.min.css)の上記パスを変更すれば解決はするのですが、Bootstrapのコアファイルはできるだけ変更・編集をしたくはありません。
ということで「css」ディレクトリ内に@font-faceを再指定するファイルを置くことで解決させたいと思います。

// ディレクトリ&ファイル名:/css/font-face.css
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/bootstrap/glyphicons-halflings-regular.eot');
  src: url('../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/bootstrap/glyphicons-halflings-regular.woff2') format('woff2'), 
       url('../fonts/bootstrap/glyphicons-halflings-regular.woff') format('woff'), 
       url('../fonts/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

さらにindex.html内に上記ファイルのリンクを下記のように貼ります。

<!DOCTYPE html>
<html lang="ja">
<head>
        :
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-face.css" rel="stylesheet">
        :
</head>
        :
</html>

これにより正常に表示されます。

ただ、この時注意が必要で「font-face.css」ファイル内で「font-family」を指定しています。当初、これは省略していいだろうと思って「font-face.css」ファイル内の「@font-face」内に「font-family」を書かなかったら、まったく表示されませんでした。「font-family」は書く必要がありますので注意が必要です。

最後に

Webをやっている人ならそれほど難しいものではないと思いますが、引っかかると全然解決できないものです。上記内容が多少なりとも参考になれば幸です。

CSSフレームワーク Bootstrap入門

著者/訳者:掌田津耶乃

出版社:秀和システム( 2018-02-22 )

定価:

Amazon価格:¥ 3,024

単行本 ( 407 ページ )

ISBN-10 : 4798054054

ISBN-13 : 9784798054056