This is how I use both bootstrap glyphicons and the font awesome fonts in cake with some simple helper methods.
You first need to copy your font awesome files to webroot/webfonts and glyphicons to webroot/fonts and the respective css files to webroot/css and include them in your views.
You need to add the glyphicoons & fontawesome css to the >head< of your src/Template/Layout/default.ctp
// first set your CSS assets to a block <?php $this->Html->css([ 'bootstrap.min', 'bootstrap.icon-large.min', 'fontawesome-all.min', 'clam' // local custom CSS ], [ 'block' => true ]) ?> // then use fetch to place your block of CSS <?= $this->fetch('css') ?> // you end up with <link rel="stylesheet" href="/css/bootstrap.min.css"/><link rel="stylesheet" href="/css/bootstrap.icon-large.min.css"/><link rel="stylesheet" href="/css/fontawesome-all.min.css"/>
First create a file src/View/Helper/IconHelper.php with the following content
<?php namespace App\View\Helper; use Cake\View\Helper\HtmlHelper; class IconHelper extends HtmlHelper { // initialize() hook is available since 3.2. For prior versions you can // override the constructor if required. public function initialize(array $config) { } public function gIcon($icon) { $format = 'glyphicon glyphicon-%s'; return $this->tag('span', '', [ 'class' => sprintf($format, $icon)]); } public function faIcon($icon) { return $this->tag('i', '', [ 'class' => $icon ]); } }
The enable it by adding the following to the initialize function of src/View/AppView.php
class AppView extends View { /** * Initialization hook method. * * Use this method to add common initialization code like loading helpers. * * e.g. `$this->loadHelper('Html');` * * @return void */ public function initialize() { $this->loadHelper('Icon'); } }
Then in any of your *.ctp view files under src/Template/
<?php // for font awesome ?> <td class="text-center"><?= $part->active ? $this->Icon->faIcon('fas fa-check') : "" ?></td> <?php // for bootstrap glyphicons ?> <td class="text-center"><?= ( (bool) $person->active) ? $this->Icon->gIcon('ok'): ''; ?></td>
0 Comments