Pages

Wednesday, June 30, 2021

How to add quickly Fontawesome with cakephp

I wanted to use Fontawesome with Bootstrap in my application.I thought it was simple but not really. I needed to search a little to acchieve this tasks.Here is a little reminder.


First, you have to download Bootsrap and Fontawesome files. Here is the link for fontawesome: https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 

Then, you need to copy files in your webroot directory.This steps was confusing to me.So, here is some pictures of my cakephp directories.

Note : I created the webfonts directory



I pasted css and js files :

  • For Bootstrap, I added bootstrap.min.css and bootstrap.min.js
  • For Fontawesome, you need to add at least all.css and fontawesome.min.css (brand.css, solid.css are optional)



Then I added Fontawesome webfonts :



Once you added the files, you need to include them in your ctp file (In my case, it's the header.ctp file).

Here is an excerpt of header.ctp :

<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
    <?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('bootstrap_4.2.1.min.css') ?>
<?= $this->Html->css('bootstrap-select_1.13.9.min.css') ?>
<?= $this->Html->css('bootstrap-datepicker3_1.9.0.min.css') ?>
<?= $this->Html->css('all.css') ?>
<?= $this->Html->css('fontawesome.min.css') ?>
<?= $this->Html->css('brand.min.css') ?>
<?= $this->Html->css('solid.min.css') ?>
<?= $this->Html->script('jquery-3.4.1.slim.min.js') ?>


<!-- select date -->
<?= $this->Html->script('bootstrap-datepicker.1.9.0.min.js') ?>
<?= $this->Html->script('selectDate.js') ?>
<?= $this->Html->script('popper.1.14.6.min.js') ?>
<?= $this->Html->script('bootstrap.4.2.1.min.js') ?>
<?= $this->Html->script('bootstrap-select.1.13.9.min.js') ?>

To finish, you can use it. Here is an example of use :

        <i class="fas fa-user"></i> <!-- uses solid style -->
        <i class="far fa-user"></i> <!-- uses regular style -->
        <!--brand icon-->
        <i class="fab fa-github-square"></i>


Note : if you search the icon name, see the following link : https://fontawesome.com/v5.15/icons

Version :

  • bootstrap 4.2.1
  • fontawesome-free-5.15.1-web
  • cakephp-3.8



No comments:

Post a Comment

Débutez en crypto-monnaie de manière ludique avec les projets "Move to earn"

Les projets "Move to earn" sont des projets très en vogue en ce moment dans le monde de la crypto-monnaie. Le principe est simple ...