[FIXED] Font Awesome glyph not being displayed as the form helpers button title

Issue

CakePHP version: 4.0.1
Font Awesome version: free-5.12.0 - here

I've just upgraded from Cake version 3.7.5 to 4.0.1 and the font awesome glyph is not being displayed as the buttons title anymore.

I followed the information here in the cookbook for the configuration of the button as detailed below:

$this->Form->button('<i class="fas fa-search"></i>', [
    'type' => 'submit',
    'name' => 'AccountChoose',
    'class' => 'btn btn-ae-lookup-as-glyph'
]);

I tried using 'escape' => true in the buttons config just in case it was something to do with the html encoding but no change.

I also tried declaring the title like this but still no change.

$this->Form->button("<i class='fas fa-search'></i>", [

The glyph is displayed outside of the button so I know it's something that's changed between the 3x and 4x branch.

My Question.

Is there a type of button configuration that would allow me to display the glyph as the buttons title in version 4.0.1 or perhaps it has been designed out in which case is there an alternative method.

Thanks Z.

@ndm - Great, all working. And thanks for creating the Pr.

Solution

The docs seem outdated, as of CakePHP 4.x button contents are HTML entitiy encoded by default. From the migration guide:

Cake\View\Helper\FormHelper::button() now HTML entity encodes the button text and HTML attributes by default. A new option escapeTitle has been added to allow controlling escaping the title separately from other HTML attributes.

So you need to explicitly disable escaping (which requires using false, not true). 4.x also introduced the escapeTitle option, which you should use instead of escape, as the latter now only applies to HTML attributes:

$this->Form->button('<i class="fas fa-search"></i>', [
    'type' => 'submit',
    'name' => 'AccountChoose',
    'class' => 'btn btn-ae-lookup-as-glyph',
    'escapeTitle' => false,
]);

See also

• Cookbook > 4.0 Migration Guide > Helper

Answered By - ndm