First of all, what is "Font Awesome" and why you might be curious about it? It's a web font containing number of different icons which you can use directly in your texts!

Font Awesome icons

The library offers icons separated in different categories. To give you the impression of what you can expect, have a look at these pictures:

Bildschirmfoto 2015-09-27 um 12.39.20

Bildschirmfoto 2015-09-27 um 13.58.57

And this how the icon will be displayed on your eshop. You can add these icons not just into the descriptions of your products, but also to your CMS pages or anywhere else where you can use the text editor in your back office.

Awesome Font on front end

Installation

1. Download this file with TinyMCE FontAwesome Plugin (v1.6.0) (or you can visit the original website). Unzip the content and copy the folder "fontawesome" to "your_eshop/js/tiny_mce/plugins"

Bildschirmfoto 2015-09-27 um 14.07.26

2. Open file "your_eshop/js/admin/tinymce.inc.js" and simply overwrite the content. I already modified the file for you.

function tinySetup(config)
{
	if(!config)
		config = {};

	//var editor_selector = 'rte';

	if (typeof config.editor_selector != 'undefined')
		config.selector = '.'+config.editor_selector;

	default_config = {
		selector: ".rte" ,
		plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor fontawesome noneditable",
		browser_spellcheck : true,
		toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image,fontawesome",
		toolbar2: "",
		external_filemanager_path: ad+"/filemanager/",
		filemanager_title: "File manager" ,
		external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
		language: iso,
		skin: "prestashop",
		statusbar: false,
		relative_urls : false,
		convert_urls: false,
		entity_encoding: "raw",
		extended_valid_elements : "em[class|name|id], span[class]",
		content_css: '//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css',
		valid_children : "+*[*]",
		valid_elements:"*[*]",
		menu: {
			edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
			insert: {title: 'Insert', items: 'media image link | pagebreak'},
			view: {title: 'View', items: 'visualaid'},
			format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
			table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
			tools: {title: 'Tools', items: 'code'}
		}
	};

	$.each(default_config, function(index, el)
	{
		if (config[index] === undefined )
			config[index] = el;
	});

	tinyMCE.init(config);
}

3. At this point, you should see the new icon in the Tiny MCE editor! For example, you can try to change the description of some of your products or edit a CMS page. To turn on the icons also on your front end, go to "your_eshop/themes/your_theme/header.tpl" and add this code before </head>:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen" />

4. Congratulation, now you are done!

Clear the cache

Make sure you have cleared your cache. If everything works correctly, you can turn on the cache back again.

Conclusion

Using icons from Font Awesome is a great way how to highlight specific parts of your product's description or important information on your CMS pages.

Enjoy! :)


Andrej Staš

Andrej is a Prestashop enthusiast. He started by developing his own themes and then formed the idea of creating Theme Maker. He enjoys finding ways to make his life simpler, and that is the philosophy he incorporates into all his projects. Andrej is also interested in WordPress, Amazon FBA, drop shipping, studying languages, and reading books.

9 Comments

David · 7 years ago

Hey Andrej,

I installed your great TinyMCE FontAwesome Plugin to my Prestashop, but there are only squares instead of icons on my Store Front Page (I want to use it in my header). Do you know, how I can fix this issue? Thanks

    Presta Theme Maker · 7 years ago

    Hi David, can you send me a link where this is happening? It would help me a lot to see the problem directly.

    Thank you

    Andrej

micheal clark · 7 years ago

Icons button appears even can yse icons but icons are invisible PS 1.6.1.6

Nkp · 7 years ago

I use your plugin and it’s fantastic. But I have a problem, in the product page I can see the icons, but in the category page I only can see like a empty box (not de icon) like I show you in this picture.
Correct: https://www.dropbox.com/s/xdpw5i1bfe12n3w/in-product-page.JPG?dl=0
Incorrect: https://www.dropbox.com/s/yc9q20ab9cl4p1c/in-category-page.JPG?dl=0

Hoping your answer and thank you so much for yor help.

    Presta Theme Maker · 7 years ago

    Hi! I would need to see your eshop directly, is it online somewhere? :) Right now I unfortunately cannot identify the problem.

Pascal · 7 years ago

Hello and thank you for the great tutorial.
i installed everything with the latest version of Font Awesome 4.6.3. i changed all the versions in the links from 4.4.0 to 4.6.3. I can see the icons on my webpage but not in the icon picker in Tiny MCE editor. The categories are all there but they are empty.

please help

~Best regards
Pascal

Pascal Westrich · 7 years ago

Hello Andrej

Thanks for your awesome instructions. I installed everything with the newest Font Awesome version and changed the links to version 4.6.3. I followed your instructions and i can see the icons on my webpage. In the Tiny MCE editor i can see the library and the categories but the categories are empty. Any help would be appreciated.

Best Regards
pascal

Achmed · 7 years ago

Hey Andrey,

Thanks for your instructions. After installing, the editor is removed from my backoffice. I don’t see the “the short and the long description” field.
Can you advise me how I get the editor back? ( including the icons ).

Thanks,
Achmed

Lovisa · 6 years ago

Hi!
I was trying to install this and followed all the steps. But nothing at all happened! I changed the font awesome version to 4.7.0.
Best regards
Lovisa

You must be logged in to post a comment.