Change Icons in the Get answers Module

How can I change the icons used in the "Get answers 24/7/365" module on the home page of the Demo?

I've tried using the Font Awesome icons with the following and none work.
<i class="icon-film icon-color1"
<i class="gk-icon-film icon-color1"
<i class="fa fa-film icon-color1"

None seem to work. There's nothing displayed or there's just a box outlined in the icon-color1 if I use the fa fa-film.
Is there a list of icon that can be used in this module? Am I coding these wrong??

Code: Select all

<div class="gkFeature" data-scrollreveal="enter bottom and move 200px over 0.66s"><i class="icon-film icon-color1" data-scrollreveal="enter top and move 100px over 0.66s wait 0.45s"></i>
      <h2>Live Chat!</h2>

Hi,
in this template for those icons we used: "mo-pixellove" font, with !important at the end ;(
so if you want yours , you have to override.

css.png

where? Here: gk_mo\css\gk.stuff.css
Second tip : Font Awesome 4.2.0 is used by default.

Thanks for the reply Oscar. I'm still a little confused by this.

1. I went to http://fortawesome.github.io/Font-Awesome/icons/ and found 3 icons i wanted to use
2. I updated the gk_mo\css\gk.stuff.css file and replaced 3 of the icon names under the "mo-pixellove" font starting at line 44
.icon-microphone:before { content: "i"; }
.icon-users:before { content: "s"; }
.icon-video-camera:before { content: "v"; }

3. Updated the module code to reflect the new icons
<i class="icon-users icon-color1" data-scrollreveal="enter top and move 100px over 0.66s wait 0.45s"></i>

Now i see the letter "S" where icon-users is
Pie chart is showing for "icon-microphone"
Timer is showing for "icon-video-camera"

in content:"_" you have to use code , not standard letters, please read more about it, in CSS Manuals/Guides.

The issue really had nothing to do with updating or defining the css for fontawesome. That css exists in the template css folder. The problem I ran into was with icon-color_x in the class. It was messing with the use of fontawesome icon class "fa-iconname" creating a colored box but no icon.

My fix was to copy the following css to the override using fa-colorx. Then using the standard fa fa-iconname with the added colors defined works. I also had to adjust the padding on the bottom a little.

copied this from style3.css line 168

Code: Select all

.icon-color1 { color: #ba8a70; }
.icon-color2 { color: #d4c472; }
.icon-color3 { color: #718f85; }

added the edited to the overrride

Code: Select all

.fa-color1 { color: #ba8a70; }
.fa-color2 { color: #d4c472; }
.fa-color3 { color: #718f85; }


Then applied it to the module

Code: Select all

<i class="fa fa-users fa-5x fa-color2" data-scrollreveal="enter top and move 100px over 0.66s wait 0.45s"></i>

Really hope this helps someone else.
Never did find any documentation for the use of fontawesome in the tempate