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!

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.

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

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

About the author

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.


5 Comments (+add yours?)


David

Jun 10, 2016 @ 13:38:00 · Reply

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

    Jun 15, 2016 @ 04:05:10 · Reply

    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

Nkp

Aug 08, 2016 @ 10:38:29 · Reply

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

    Aug 09, 2016 @ 14:35:38 · Reply

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

Pascal Westrich

Aug 20, 2016 @ 17:12:22 · Reply

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

Leave a Reply