CKeditor strips the <i> tags, and I can't find where in config.js I can put this code.

CKEDITOR.dtd.$removeEmpty['i'] = false

This is a solution for Drupal 7 and the CKEditor module.

  • 1
    Do not modify core. That file could change at any time. – Kevin Apr 21 '16 at 15:13
  • I know that. For that reason i need help :) – Немања Пантош Apr 22 '16 at 6:45

Add an empty space -  

<i class="fa fa-drupal">&nbsp;</i>
| improve this answer | |
  • 2
    that's not a sustainable solution ! – George Katsanos Apr 20 '17 at 13:05
  • This works, I've also add the "i" tag to available tags, but when I go to edit the node, the "i" tag disappears.. – arrubiu Jun 16 '17 at 9:13
  • @arrubiu it is because it is an empty tag. Probably there is some rule such a tags to be removed and &nbsp; prevents it. – Bo rislav May 20 at 11:41

I am on Drupal 8.6.1, Fontawesome module 8.x-2.6 and had a similar problem with CKEditor stripping module inserted icons. I also tried manually typing in “i“ icons in “Source” editing mode. It failed even after I added &nsp at the end and inserted “i” in Filter tags for CKEditor.

For some reason, it all worked when I changed the Fontawesome Admin>Configuration>Font Awesome settings>Font Awesome Tag from “i” to “span” and added “span” tags to CKEditor Filter.

| improve this answer | |
  • I did all the same things as you, and even using <span> tags didn't help me. The "Rich Text" text format strips out the classes on my span tags. My only solution so far has been to uncheck the "Limit allowed HTML tags and correct faulty HTML" in the text format settings page (/admin/config/content/formats). Did you make any changes to the text format? – Keven Jan 28 '19 at 19:54
  • I finally found a solution that is working for me. I added <i class> and <span class> to the list of allowed tags. The important part was making sure class was in there. Source: drupal.org/project/fontawesome/issues/2936038#comment-12418280 – Keven Jan 28 '19 at 20:10

I suggest the following:

<i class="icon icon-classname">&zwnj;</i>

$zwnj is a "zero-width non-joiner" which avoids playing with left-padding/left-margin.

| improve this answer | |

Adding a hex symbol in the i tag doesn't work for everyone and not everyone is a php developer who can just whip up a small module for a solution.

Here is a quick js fix, specifically for font awesome.

  • navigate to /admin/config/content/formats/manage/basic_html
  • add span.fontAwesome | Icon to the CKEditor plugin settings
  • select "Limit allowed HTML tags and correct faulty HTML"
  • add <i class=""> to the allowed tags in the filter settings

  • You'll need to add a custom javascript file, the font awesome library and the jquery library.

  • paste the following into your theme.libraries.yml file:

        js/custom_js_file.js: {}
        - core/jquery
      remote: https://fortawesome.github.io/Font-Awesome/
      version: 4.5.0
      name: MIT
      url: https://fortawesome.github.io/Font-Awesome/license/
      gpl-compatible: true
        https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }`
  • in the theme.info.yml file paste the following:

      - theme/global-js
      - theme/font-awesome
  • Paste the following into the custom javascript file.

(function ($) { $.fn.awesomeIcon = function(){ $(this).each(function(i, el) { $('span').replaceWith(function(){ return $('<i class="fa ' + $(el).text() + '">'); }); }) } $('.fontAwesome').awesomeIcon() })(jQuery);

  • Refresh the cache
  • create some new content
  • in the CKEditor, paste the class name of a fontAwesome icon e.g.fa-thumbs-o-up
  • highlight it and select icon from the styles dropdown.
  • publish the post

If all goes well the fontawesome icon should appear in the node on the front end.

| improve this answer | |

Use &nbsp; and add style word-spacing, because spacer move content to the left

<p><i class="fa fa-drupal" style="word-spacing: -1em;">&nbsp;</i><br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.