Surreal commenting out FontAwesome references


#1

I have a site using the latest version of Font Awesome (5.x) and for some reason if I edit a page with those fonts in Surreal it comments out the code. For instance:

I can’t provide the sample code here (it’s not allowed) but the list item tag has comments placed around it when saving or publishing a page revision.

how can this be avoided?

Thanks!


#2

I’m afraid I’m going to have to see some sample code to test this myself. If you can’t post it here, please open a support request through the Help tab of the CMS and I’ll be happy to take a look :slight_smile:


#3

Thanks. Heading out for a couple days but will when back.


#4

I have the same issue.

Surreal strips out any reference to Font Awesome icons regardless of whether they are referenced as <i> or <span> tags.

Example: <a href="online.html"><i class="fal fa-laptop"></i> Online</a>


#5

Looks like the problem is caused by ckeditor.

Here is the apparent fix:


#6

Unfortunately I couldn’t make this work. It’s still the single biggest headache for my site that relies on Fontawesome. Publishing a page results in comments around the < i > or < span > elements that surround the FA code.

Essentially, pages either use Fontawesome or Surreal, but not both. :<


#7

Here’s what did work, at least for FA 5.x, hosted version:

Add a non-breaking space ( ) between the element. It does throw off the icon spacing a bit, but I fixed that with some custom CSS.


#8

We use TinyMCE, not CKEditor, but both have a cleanup process that removes empty elements.

I realize it’s not always possible, but we generally recommend avoiding font icons inside editable regions as they’re not editable by the user.

In addition, the newest version of FontAwesome complicates things futher, as there are a few different ways you can implement it. The recommended way relies on JavaScript which converts the <i> to an <svg>.

This is something we’ll need to figure out a best practice for moving forward.


#9

Thanks Cory - and I realize it’s really a Fontawesome issue, not a Surreal issue. And you are correct - sometimes it’s unavoidable to use font icons inside editables… but good advice to avoid when possible.