How to insert Font Awesome Icon in Joomla Editor

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. But in Joomla 3 Editor you can not insert Font Awesome Icon <i></i> tag to HTML Module or Article Single using a WYSIWYG editor because your WYSIWYG editor decided to delete the content.

How to insert Font Awesome Icon in Joomla Editor?

You can use “CodeMirror” or “No Editor” or try to properly configure you WYSIWYG editor so it doesn’t wreck your content without warning.

Site > Global Configuration > Site > Site Settings > Default Editor > Editor - CodeMirror.

You should generally be very careful when using a WYSIWYG editor like TinyMCE, JCE, CKeditor, or others. After saving always make sure your WYSIWYG editor did not alter the source. Even if you work in HTML / source view most editors are notorious for “cleansing” or “correcting” the source. One problem is that “empty” tags or HTML elements like

<i class="fa fa-home"></i>

or

<span class="fa fa-home"></span>

or

<a href="http://www.facebook.com/hiresponsive" class="fa fa-facebook"></a>

To avoid the automatic deletion of empty HTML elements you could take the following steps:

Joomla Content Editor (JCE) and TinyMCE

Both JCE and TinyMCE (the standard Joomla WYSIWYG editor) make use of the same plug-in “Editor – TinyMCE” which offers advanced settings.

  • In the Joomla backend go to Extensions > Plug-in Manager
  • Into the “Filter” type
    tinymce
  • Click on the search icon.
  • The plug-in “Editor – TinyMCE” should be found.
  • Click on the plug-in’s name to edit it.
  • Go to Plugin > Extended Valid Elements.
  • The field might be empty or it could contain some source already.
  • At the very end of whatever is in there add the following
    ,+a[*],+i[*],+em[*],+li[*],+span[*],+div[*],
    
  • Click “Save & Close” in the toolbar.

From now on empty <a>, <i>, <li>, and <span> elements should no longer be deleted when you save.

JCKeditor

Access your site’s root via FTP.
Use a text editor capable of UTF-8 encoding to open the file plugins/editors/jckeditor/config.js
For each element you want to protect from being deleted add a certain line. For empty <i> and <a> tags this would be for instance

// ALLOW empty <a></a>  
config.protectedSource.push(/<a[^>]*><\/a>/g);  
// ALLOW empty <i></i>  
config.protectedSource.push(/<i[^>]*><\/i>/g);  
// ALLOW empty <em></em>  
config.protectedSource.push(/<em[^>]*><\/em>/g);  
// ALLOW empty
	<li></li>
config.protectedSource.push(/	<li[^>]*><\/li>/g);  
// ALLOW empty <span></span>  
config.protectedSource.push(/<span[^>]*><\/span>/g);  
// ALLOW empty
<div></div>
config.protectedSource.push(/
<div[^>]*><\/div>/g);  

These lines have to be added to the function( config ) to work.
The content of the config.js would then be as follows:

/*  
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.  
For licensing, see LICENSE.html or http://ckeditor.com/license  
*/

CKEDITOR.editorConfig = function( config )  
{  
    // Define changes to default configuration here. For example:  
    // config.language = 'fr';  
    // config.uiColor = '#AADC6E';  

    // ALLOW empty <a></a>  
    config.protectedSource.push(/<a[^>]*><\/a>/g);  
    // ALLOW empty <i></i>  
    config.protectedSource.push(/<i[^>]*><\/i>/g);  
    // ALLOW empty <em></em>  
    config.protectedSource.push(/<em[^>]*><\/em>/g);  
    // ALLOW empty
	<li></li>
config.protectedSource.push(/	<li[^>]*><\/li>/g);  
    // ALLOW empty <span></span>  
    config.protectedSource.push(/<span[^>]*><\/span>/g);  
    // ALLOW empty
<div></div>
config.protectedSource.push(/
<div[^>]*><\/div>/g);  

};

Save and close the file.

In Joomla! 3.3.x the TinyMCE editor deletes <span>…</span> tags.

Since Joomla version 3.3.3 the standard editor TinyMCE decides to delete all <span> and <span> tags.
Sadly this will affect content like that from the Unity template’s “smoothscroll” module as well:

<ul class="uk-dotnav uk-dotnav-vertical" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
	<li><a title="Unity" href="#tm-header">Item 1</a> <span>Unity</span></li>
	<li><a title="Welcome" href="#tm-top-a">Item 2</a> <span>Welcome</span></li>
	<li><a title="Pagekit" href="#tm-top-b">Item 3</a> <span>Customer</span></li>
	<li><a title="Mobile" href="#tm-bottom-a">Item 5</a> <span>Mobile</span></li>
</ul>

If your editor is set to be TinyMCE then the HTML will be altered without warning when you save, even if you did not actively change anything:

<ul class="uk-dotnav uk-dotnav-vertical" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
	<li><a title="Unity" href="#tm-header">Item 1</a> Unity</li>
	<li><a title="Welcome" href="#tm-top-a">Item 2</a> Welcome</li>
	<li><a title="Pagekit" href="#tm-top-b">Item 3</a> Customer</li>
	<li><a title="Mobile" href="#tm-bottom-a">Item 5</a> Mobile</li>
</ul>

Mind the missing <span> and </span> tags. The result in the frontend will be a broken “smoothscroll” with the text not being properly positioned anymore.

Worth knowing: If the opening <span> tag has a class or id attribute like

<span class="myclass">Whatever</span>

or even an empty one as in

<span class="">Whatever</span>

the tags will not be deleted.

How to prevent this:

  • In the Joomla backend go to Extensions > Plugin Manager and open “Editor – TinyMCE“.
  • Into the field Extended Valid Elements enter
    span
  • Click “Save & Close” in the toolbar.

Now all <span> and </span> tags should be maintained.

Where in doubt about the configuration please contact the developers of your editor.

Share this :

Comments are closed.

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter