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.
-
1Do not modify core. That file could change at any time.– KevinCommented Apr 21, 2016 at 15:13
-
I know that. For that reason i need help :)– Немања ПантошCommented Apr 22, 2016 at 6:45
Add a comment
|
6 Answers
Add an empty space -
<i class="fa fa-drupal"> </i>
-
5
-
This works, I've also add the "i" tag to available tags, but when I go to edit the node, the "i" tag disappears..– arrubiuCommented 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
prevents it. Commented May 20, 2020 at 11:41
I suggest the following.
<i class="icon icon-classname">‌</i>
‌ is the HTML entity for the zero-width non-joiner character, which avoids playing with left-padding/left-margin.
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.
-
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?– neuquenCommented 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 sureclasswas in there. Source: drupal.org/project/fontawesome/issues/2936038#comment-12418280– neuquenCommented Jan 28, 2019 at 20:10
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 | Iconto the CKEditor plugin settings - select "Limit allowed HTML tags and correct faulty HTML"
add
<i class="">to the allowed tags in the filter settingsYou'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-awesomePaste 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.
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"> </em>.
And that did the trick.
Use and add style word-spacing, because spacer move content to the left
<p><i class="fa fa-drupal" style="word-spacing: -1em;"> </i><br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
