Easy way to use Font Awesome with Prestashop 1.6.x

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!

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

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.

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"

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! :)