Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info

To use this functionality, your site needs to have either icon option (or both) enabled in your theme. See image below for where these settings are located in your theme.

...

  • When inserting icons, you should hard code the icons by switching to Source mode (Full HTML) in the CKEditor5 toolbar.

  • Once you are in Source mode. You can now hard code any Bootstrap Icon and Font Awesome Icon by wrapping them with an <p> tag and <em> tag. See below for an example.

...

  • To verify they are ‘sticking’, switch back to wysiwyg mode and the icon should be visible. Then switch to Source again and make sure the code it there.

Note: We have noticed that if there is no text present (ie only an icon), CKEditor removes everything. We believe this ‘design’ feature in CKEditor to no allow empty content.

Note: The &nbsp; is required inside the <i></i> tag or CKEditor will remove the entire tag.

Info

For more information on finding the right icon for you, please refer back to the Bootstrap Icons and Font Awesome Icons libraries online.