I managed to insert fontawesome iconS using Ckeditor with the Font Awesome Icons v1 module.

I just put this code in the HTML view of Ckeditor.

<i class="fa fa-camera-retro fa-lg">&nbsp;</i>

The icon is shown correctly in frontend but in CKEditor it is not shown at all.

I guess I need to load all fontawesome files inside Ckeditor. How can I do this? I need to see the icon in ckeditor in the same way as I see it in frontend.

Fontawesome is located at: sites/all/libraries/fontawesome

  • Is fontawesome implemented in the backend? For the backend theme? – leymannx Apr 16 '15 at 20:03
  • @leymannx I just enabled the fontawesome module, I think it not implemented in backend. How can I do this? – chefnelone Apr 17 '15 at 6:23

A CKEditor plugin for fontawesome exists. If you're using the WYSIWYG module there are a number of hooks that allows you to modify your WYSIWYG editor. In fact, someone has done a write up on how to manually add CKEditor plugins using Drupal.

  • The tutorial works fine to install the Leaflet plugin. But is not that easy for the Fontawesome plugin. – chefnelone Apr 17 '15 at 7:43
  • What's the problem with the CKEditor plugin? – Shawn Conn Apr 17 '15 at 15:14
  • the icon is not shown at all under Editor appearance/Available buttons – chefnelone Apr 20 '15 at 16:16
  • Update: the icon is SHOWN under Editor appearance/Available buttons. I drag it to the Toolbar. But the icon is not shown when editing a page. – chefnelone Apr 23 '15 at 16:47

I use the add-on CKEditor Font Awesome by DOKSoft. This plugin will attach Font Awesome CSS automatically. See demo.

  • 1
    Unfortunately that is a non-free add-on. – Pere Apr 5 '17 at 13:08

You can have the Font-Awesome icons in the Drupal wysiwyg area as well. Add the following line in the wysiwyg advanced options > Custom JavaScript config. (admin/config/content/ckeditor/edit/xxx):

config.contentsCss = ['//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css','//cdn.jsdelivr.net/bootswatch/3.3.6/readable/bootstrap.css'];

ps: you may like to add this second line to allow empty tag (then you can avoid the useless&nbsp; in the tag)

CKEDITOR.dtd.$removeEmpty.i = 0;

At the end you should have something similar to:

config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['i'] = false
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty['span'] = false;
config.contentsCss = ['//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css','//cdn.jsdelivr.net/bootswatch/3.3.6/readable/bootstrap.css'];

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.