Hi there,

It would be nice that we could have different options to print the icons

Actual:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i>&nbsp;</span>

Option 1 without whitespace:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i></span>

Option 2 without whitespace, without container:
<i class="fa-facebook-messenger fa-lg fab"></i>

The whitespace is impossible to remove with CSS, and makes the centered alignment of one single icon impossible. Also the container might not always be used, this just adds some unused HTML tags.

I'm a noob in module development, though I figured out the changes are to be done in fontawesome/js/plugins/drupalfontawesome/plugin.js 

//if not option 2
     var container = new CKEDITOR.dom.element('span', execEditor.document);
     container.addClass('fontawesome-icon-inline');
     container.append(icon);
     //if not option 0
          container.appendHtml('&nbsp;');

//if option 2
     range.insertNode(icon);
//else
     range.insertNode(container);

I have no clue how to add options into the modal or options to the module to have it by default.

Another easier solution, but maybe less clean would be to have something like this:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i><span class="fontawesome-space">&nbsp;</span></span>

This is easy to disable via CSS, but adds more HTML tags...

Issue fork fontawesome-3229802

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

letrollpoilu created an issue.

daniel.moberly’s picture

daniel.moberly commented

The &nbsp; is currently required in order to keep the tags in place - otherwise CKEditor will remove them automatically as "empty" tags

letrollpoilu’s picture

letrollpoilu commented

There is a way to enable empty <i> tags. Here is what's in my ckeditor.config.js file:

/*Fontawesome*/
CKEDITOR.config.coreStyles_italic = {
    element: 'i',
    overrides: 'em'
};

/* enables empty i */
$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
    CKEDITOR.dtd.$removeEmpty[i] = false;
});
daniel.moberly’s picture

daniel.moberly commented

That's true, but its unreasonable to expect that from the vast majority of users of this module - it needs to work with the more-or-less default CKEditor settings

paramnida made their first commit to this issue’s fork.

carolpettirossi’s picture

carolpettirossi commented

The &nbsp is breaking Duotone icons. I wonder if there's a way to remove the &nbsp. Is there any way I can remove the &nbsp?

joel_osc’s picture

joel_osc commented

Apparently the issue with ck5 removing empty elements may be fixed (although I cannot seem to sort out how to get the fix working). According to https://www.drupal.org/node/3379650 the space should no longer be needed.