Joomla can be annoying sometimes. You try to add a fancy icon to your article like this, , but when you save your article the icon isn't there. On inspection you can see the tags have been removed!
This is irritating, but before you spend all day trying to understand it, there is an easy solution.
TL:DR: Learn just enough about editor settings to configure Joomla so editing is how you want it to be.
The answer is within the Joomla System settings for Plugins: Editor - TinyMCE
So, if you do need a quick fix for this, here's what to do.
- Go to the Administrator menu for your side.
- Click System, and find Plugins, in the Manage section
- Type editor into the search box
- Open "Editor-TinyMCE"
For now ignore the other settings, you can learn those another day!
- Scroll down to find "Use Joomla Text Filter" amd turn it on
- Save and close
Now you should be able to paste icons the supported Font Awesome icon set if you are using the "Cassiopeia" default template or those that your template specifically supports.
Note: The Super Users group, by default, has no text filtering for editing. If you are not a Super User, you may need to adjust the text filtering in Joomla. It is a little bit easier not to have to do this, and just be a Super User, but if you adjust your user role to have No filtering you will be all set, but remember that all those with your user role will now have no filtering!
See also
- Since Joomla 4.0.0, the Joomla! CMS comes with its own Font Awesome Font Set. These icon fonts are available by default for use in the "Cassiopeia" (Frontend) and "Atum" (Administrator) Templates.
- A closed GitHub issue #37046 - Tinymce strips span tags without class or id in Joomla
