読者です 読者をやめる 読者になる 読者になる

やったこと

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が表示できるようなりましたとさ。

めでたしめでたし。