WebsiteBaker Support (2.8.x) > Templates, Menus & Design

## SOLVED ## Fontawesome icon problem Ckeditor

(1/2) > >>

peppos:
I'm doing some tests with WebsiteBaker and I'm using icons http://fontawesome.io
Because to put these icons you use for example this code:


--- Code: ---<i class="fa fa-check" aria-hidden="true"></i>
--- End code ---

If I put it in the template, for example index.php I have no problems. But if I have to put through the admin panel CKEditor, I have to put the viewing html and saves me well. But then if at a later time I make a change to that I find the page with the missing icon and the modified code from CKEditor. How can I do to prevent ckeditor to change myself the html code that put me? I will not completely disable CKEditor because it is still useful.

Boudi:
This is because the CK Editor strips out the <i> tag.

There is a workaround but even this doesn't seem to work.

In the wb_ckconfig.js I commented out the:


--- Code: ---config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

--- End code ---

And even inserted extra code:


--- Code: ---config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );

--- End code ---

Refreshed the mods, cleared the cache. But still no luck.

Any solutions over here guys?

dbs:
In newer WB versions the include.php of ckeditor is stronger as the wb_ckconfig.js.
If you have the same parameters in these two files, the parameter in include.php wins.

try this line

--- Code: ---config.protectedSource.push( /<i class[\s\S]*?\/i>/g );
--- End code ---

Boudi:
Hi,

Thnq for picking this up.

Implemented your code into wb_ckconfig.js the CKEditor (V4.6.2). Refreshed the mods. Cleared the browser cache and had to login again into the backend.

No luck.

Even replaced the double quotes with single ones - no luck
Even put an &nbsp; into the open <i>&nbsp;</i> - no luck

dbs:
Had my line tested before in ckeditor/wb_config/wb_ck_config.js. works for me.

--- Code: ---<h2><span style="color:#a52a2a">PHP [[php-version]] (NON STRICT) </span><i class="fa fa-heart"> </i></h2>
--- End code ---

Where is your wb_ckconfig.js?
The search order is
1. directly in your template
2. in folder /templates/
3. in modules/ckeditor/wb_config/

Navigation

[0] Message Index

[#] Next page