8

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.

2
  • 1
    Do not modify core. That file could change at any time.
    – Kevin
    Apr 21, 2016 at 15:13
  • I know that. For that reason i need help :) Apr 22, 2016 at 6:45

6 Answers 6

9

Add an empty space -  

<i class="fa fa-drupal">&nbsp;</i>
3
  • 5
    that's not a sustainable solution ! Apr 20, 2017 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, 2017 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, 2020 at 11:41
6

I suggest the following.

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

&zwnj; is the HTML entity for the zero-width non-joiner character, which avoids playing with left-padding/left-margin.

1
  • This works! thanks
    – KTM
    Sep 19, 2023 at 13:04
4

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.

2
  • 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?
    – neuquen
    Jan 28, 2019 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
    – neuquen
    Jan 28, 2019 at 20:10
0

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:

    global-js:
      js:
        js/custom_js_file.js: {}
      dependencies:
        - core/jquery
    
    font-awesome:
      remote: https://fortawesome.github.io/Font-Awesome/
      version: 4.5.0
      license:
      name: MIT
      url: https://fortawesome.github.io/Font-Awesome/license/
      gpl-compatible: true
    css:
      theme:
        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:

    libraries:
      - 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.

0

For reasons unknown to me, none of the solutions here worked until I tried something like:

<em class="bi bi-arrow-right-circle-fill me-2 fs-2">&nbsp;</em>.

And that did the trick.

-1

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.
</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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