Method to add font awesome new icons to Creativity

Hi
this is a solution to add the latest font-awesome on your website. I hope it will be helpful for every users.
Note : it does not erase font-awesome version 3.0.2 which is usefull for icon "animation" already installed. It just add new icons.

step 1 add css from 4.5 version to 3.0.2 version
1 : go to Font-Awesome download page http://fortawesome.github.io/Font-Awesome/
and download the archive on your computer. Extract the archive in a folder called "font-awesome-4.5" (for example)
2 : find in your website the file "/templates/gk_creativity/css/font-awesome.css. Download this file into another folder called "font-awesome-3.0.2" (for example)
3 : in "font-awesome-4.5" select and copy the content of font-awesome.css
4 : in "font-awesome-3.0.2" paste this content at the very begining of the code (don't replace !) just before
"/*! * Font Awesome 3.0.2"
5 : Important : line 7 to 11 just after "@font-face { font-family: 'FontAwesome';" find and replace url "../fonts/fontawesome-webfont..." into "../fonts/awesome405/fontawesome-webfont..."
6 : save (now you have the entire css for 4.5 version + the original css for 3.0.2 in the same file)
7 : upload the new font-awesome.css on your website folder (for security, keep a copy of the original one)

step 2 - Add link to version 4.5 icons to your template
1 : go to your website folder /templates/gk_creativity/fonts
2 : create a new folder called "awesome405"
3 : upload there the 4.0.5 version files you extracted from the archive "FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff, index.html"
to the folder /templates/gk_creativity/fonts/awesome405

Now you can use the new Font-Awesome directly in your website
for example in mod_image_show_gk4 sliders, adding in your slide content <i class="fa fa-bed"> will add a bed icon

Hi

Thank You for this instruction. It's best if You wish to use old variant and new one at the same time, but if someone want to just use new and redo this couple of icons used in template please simply add this code at the bottom of /layout/blocks/head.php

Code: Select all

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />


Hi teitbite
that's right but you have with version 3 some animated icons (beating heart, bell...)
I'm not sure it works with version 4.
That's why I prefer to use both versions at the same time.

Hi

All icons are still there, but names may have changes. For example "icon-mobile-phone" from ver3 is now called "fa-mobile", so classes in content would need to be changed if someone decides to use ver4 only.