やったこと

webサービスを作るときに考えたことを垂れ流します

CakePHP3でBootstrapのglyphiconが使えないとき！

プログラミング

CakePHP3でTwitter Bootstrap（bootstrap-uiでインストール）を使用してるんだけども、アイコン（glyphicon）が使えなくて困りました。

↓こんな感じでハートマークを表示させようとしてもフォントファイルを見つけられません。ふぉんと困った・・。

<span class="glyphicon glyphicon-heart"></span>


これは、CakePHPのwebroot以下のディレクトリが悪かったせいでした。

基本的にbootstrapは、ダウンロードしたときのディレクトリ構造をそのまま維持しないと、ファイルをちゃんと見つけられないみたいです。

すなわち、CakePHPのwebroot以下はこのような構造にすると良いでしょう。

webroot
│
├─bootstrap
│  ├─css
│  ├─fonts
│  └─js
├─css
│
├─img
│
└─js

CakePHPのHtmlヘルパーでは、こんな風に呼び出してあげましょう。

<head>
    <title><?= $title ?></title>
    <?= $this->Html->css('/bootstrap/css/bootstrap.min.css') ?>
    <?= $this->Html->script('/bootstrap/js/bootstrap.min.js') ?>
</head>

これでちゃんと「fonts」のディレクトリを見つけられるようになって、glyphiconが表示できるようなりましたとさ。

めでたしめでたし。