Icon are not rendered in ckeditor

[FabriceSalvaire]

a workaround is to use the source mode to see the corresponding xhtml code.

[sq9mev]

Confirmed with djangocms_bootstrap4-1.5.0, both left and right are getting "undefined" class instead of eg. "far" for Font Awesome 5 Regular iconset.

Looks exactly like #83 which is closed with message "This has been fixed in 1.4.0"…

The issue is observer with:

• djangocms_bootstrap4-1.5.0
• djangocms_link-2.5.0
• djangocms_icon-1.5.0
• djangocms_picture-2.4.0

[sq9mev]

I've found the cause in bundle.base.js, here's the patch (this file is compressed somehow, so uncomressed it with js-beautify and continued to work on it uncompressed).

How should i work on js files in uncompressed form? Commits on js scripts are unreadable in this repo as for now (single diff contains a whole linie), so the change history is lost.

I'll provide PR in a moment containing original bundle.base.js edited by hand.

--- bundle.base.js      2020-01-30 09:09:59.602402013 +0100
+++ _bundle.base.js     2020-01-30 09:08:22.255733764 +0100
@@ -3828,7 +3828,7 @@
                             try {
                                 c = JSON.parse(u)
                             } catch (e) {}
-                            var l = i.find("select option:selected").data("iconset-prefix");
+                            var l = i.find("select option:selected").data("prefix");
                             if ("string" == typeof c) o()(".js-icon-" + (s ? "left" : "right")).html('\n                    <span class="' + l + " " + a + '"></span>\n                ');
                             else {
                                 var f = e.container.data("static"),

[corentinbettiol]

I think the proper way to fix this is to update the "source" files in private/js folder, and then to run gulp in order to compile them into the *.bundle.js ones.

[foarsitter]

In link.html a include is done of djangocms_icon/includes/icon.html with icon_class=instance.icon_left instance=instance.icon_left. But i nstance is a string and not a plugin.

For my project overriding the link.html template solves the problem: templates/djangocms_bootstrap4/link/default/link.html

{% load cms_tags %}{% spaceless %}
  {# this needs to be in one line for rendering purpose #}
<a
        href="{{ link }}"
        {% if instance.target %}
        target="{{ instance.target }}"
        {% endif %}

        {% if instance.attributes %}
          {{ instance.attributes_str }}
        {% endif %}
>
  {% if instance.icon_left %}
    <i class="{{ instance.icon_left }}"></i>
  {% endif %}
  {% for plugin in instance.child_plugin_instances %}
    {% render_plugin plugin %}
  {% empty %}
    {{ instance.name }}
  {% endfor %}

  {% if instance.icon_right %}
    <i class="{{ instance.icon_right }}"></i>
  {% endif %}
</a>
{% endspaceless %}