Font Awesome not working In cakephp?

Question

Below id my code. i have added font-awesome for cakephp. but in my output the fontawesome not appearing.

HTML

 <i class="fa fa-institution"></i>

CSS

 .fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

Answer 1

Where you're giving this. In html link or button.

1. Check whether you properly included the font awesome or not

2. If you're as link means $this->Html->link("<i class='fa fa-users'></i>", [action here], ['escape' => false])

And i'm using font awesome icons for my cakphp 3 project also. its working fine for me

Answer 2

For Font Awesome 6 in Cakephp 4, you will need to :

1. Copy the css files into your webroot/css folder
2. Copy the js files into your webroot/js folder
3. Copy the webfonts files into your webroot/webfonts folder. Do not put them in the font folder.

In your code, load the js & css files as such.

echo $this->Html->css('fontawesome.min');
echo $this->Html->script('all.js');

Answer 3

You need to ensure that you Copy the webfonts folder from FontAwesome extract and place it into your project one directory above to your all.min.css file. This way it can automatically find the available fonts.

Directory Structure

Answer 4

One more thing I noticed is that you might have forgotten to copy the fonts folder, it should be placed in the webroot directory. Since, you confirmed that it is showing the square boxes instead of the icon, I would advice you copy the fonts folder to the proper place.