Font Awesome markup removed from Web Content

[Paul Allain, geändert vor 8 Jahren.]

Hello Liferay community,

While trying to use Font Awesome in Web Content I am getting this very strange behaviour, namely: the first time I enter the html markup and publish, things look good as they're meant to. But then when I go back to edit the html inside my Web Content none of the FA tags are in there where they have been when I first added the content.

This is the code when it's first added:

	<div>
		<i class="fa fa-map-marker"></i>
		<p><span>21 Liverpool Street</span> London, UK</p>
	</div>

After the second visit the code becomes as follows:

	<div>
		<p><span>21 Revolution Street</span> Paris, France</p>
	</div>

I'm using FA 4.2 (tried 4.3.0 as well) by adding the CSS import to main.css inside the _diff\css folder in the usual manner.

Any ideas why this is happening? All help greatly appreciated.
Paul

[Paul Allain, geändert vor 8 Jahren.]

Stranger still is the fact that the following html:

	<div class="footer-icons">
		<a href="#"><i class="fa fa-facebook"></i></a>
		<a href="#"><i class="fa fa-twitter"></i></a>
		<a href="#"><i class="fa fa-linkedin"></i></a>
		<a href="#"><i class="fa fa-github"></i></a>
	</div>

Is replaced by:

<div class="footer-icons">&nbsp;</div>

I have a feeling that's a bug.

[David H Nebinger, geändert vor 8 Jahren.]

...Re-opened web content is missing the tags I used...

Paul Allain:

I have a feeling that's a bug.

It is a bug. It's either in how the content is prepared for the CKEditor or what CKEditor is doing with it itself. I don't know which, but that's where the issue lies.

You can add them back in and save and they'll stay until you try to edit the content again.

[Paul Allain, geändert vor 8 Jahren.]

David H Nebinger:

...Re-opened web content is missing the tags I used...

Paul Allain:

I have a feeling that's a bug.

It is a bug. It's either in how the content is prepared for the CKEditor or what CKEditor is doing with it itself. I don't know which, but that's where the issue lies.

You can add them back in and save and they'll stay until you try to edit the content again.

Any ideas for a workaround?

Also if a bug report has not been raised I'll be happy to raise one if you'd post a link to where I could do that.

Paul

[David H Nebinger, geändert vor 8 Jahren.]

Workaround? Store your actual webcontent being developed outside of Liferay or, if possible, get it right the first time you publish it

Where to raise one? http://issues.liferay.com is where it's at.

[Alfonso Crisci, geändert vor 6 Jahren.]

I worked on a similar issue in the past and adding a non-breaking space between the <i> and </i> could work, for example:

<p><button class="btn" type="button">
<i class="fa fa-search">&nbsp;</i>
</button></p>

Possible matches:

https://stackoverflow.com/questions/15659390/ckeditor-automatically-strips-classes-from-div
http://docs.ckeditor.com/#!/guide/dev_acf
https://drupal.stackexchange.com/questions/63886/fontawesome-tags-removed-when-switching-between-source-and-wysiwyg

There is a way on 6.2 to customize the CKEditor default behavior directly within \webapps\ROOT\html\js\editor\ckeditor\ckconfig.jsp, however this has changed in Liferay 7: should you wish to customize the editor on such version, the starting point is: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/modifying-an-editors-configuration

[L Winchester, geändert vor 6 Jahren.]

Thanks for this reply Alfonso. It was indeed a CKeditor issue -- removing empty tags in its cleanup process. So just have to add something within the icon tags to keep them from being removed.

[L Winchester, geändert vor 6 Jahren.]

I realize this is an old thread, but I am encountering this bug now in CE 7 GA4.

Upon subsequent saves, the web content editor removes any tags with fa icons.

I searched the issue tracker but could not find a ticket for this. Does anyone know if it has a fix in the works?