Change the icons in gk_short menu

I want to change the icons in gk_short menu against roll over images.

I found the pixellove font and also gk_stuff.css

but how can I change the icon against roll over images (if possible)?

Hi

I'm afraid I do not understand, can You please show me what icons You have in mind and also what roll over effect would You like to have ??

Hi

I'm afraid I do not understand, can You please show me what icons You have in mind and also what roll over effect would You like to have ??

Ok... the icons I mean - see enclosed screenshot.

I know this icons are coming from gk.stuff.css starting at row 40:
[class^="gk-icon-"]:before,
[class*=" gk-icon-"]:before {
font-family: "steakhouse-pixellove" !important;
etc...

But I want to have my own icons and as I cannot build my own font I would like to exchange icons against a roll/mouse*** over image

with roll or mouse over I mean the effect an image or as in steakhouse the icon change its color/transparency

Hi

I advice to use FontAwsome. There is nearly 500 icons there and will be easy to use. For example if You have a code for icon now:

Code: Select all

<li data-scroll-reveal="enter bottom over .5s after .25s" data-scroll-reveal-id="4" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="#menu"><i class="gk-icon-dinner-set-solid"></i> <span>Menu</span></a></li>


plase simply replace it with:

Code: Select all

<li data-scroll-reveal="enter bottom over .5s after .25s" data-scroll-reveal-id="4" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="#menu"><i class="fa fa-facebook"></i> <span>Menu</span></a></li>


than small css adjustment placed in override.css after enabling override in template settings:

Code: Select all

#gkHeaderMod .gk-short-menu i.fa:before {
transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
color: #ffffff;
}

#gkHeaderMod .gk-short-menu i.fa:before:hover {
color: #dddddd;
}


it seems to work fine - at least the Background is having full size en I see a Facebook icon upfront the first link.

But how can I choose (and see the available icons?) I uploaded and installed the awsome true type font to my laptop, but can't find the icons in there?

I think had the wrong font ( which was delivered with quickstart version)? - see screenshot

This seems to be the good one - I just need to learn how to use it...
If you have any extra tips for me, it would be nice - but I'll try my self: "Learning by doing"

Hi

You doesn't have to install icons on Your computer, thats the beauty of font-face

Here are all informations about FontAwsome http://fortawesome.github.io/Font-Awesome/icons/

It's really easy to use. All You need to do is to turn editor into HTML view and use the code from the site I've attached a link to. Like for example:

Code: Select all

<a class="fa fa-facebook">Facebook</a>


On the same site You can download the font. It's always good to have latest version with more awsome fonts.

Yes, I got this and works perfect.
Thanks

But may be you can help me with a related question:

I changed in template management the fonts
header: http://fonts.googleapis.com/css?family=Calligraffitti
body: http://fonts.googleapis.com/css?family=Abel

As far as I can see on the live site: http://54404758.swh.strato-hosting.eu/hochzeitsautomieten.de/index.php/de/
this seems to be ok.

But I got a call from my client that he could not see the changed font in different brouwsers like mozilla or on tablets.
Do I miss something here?

Please look and check my settings in attached screenshot

Hi

Do not write "font-family: 'Abel', sans-serif" in the settings. Just "Abel" is enough.

Right now code created looks like this, which is not correct:

Code: Select all

.item-content h6 { font-family: 'font-family: 'Abel', sans-serif', Arial, sans-serif; }


...found this on google, thanks for that info! I had to change

Code: Select all

#gkHeaderMod .gk-short-menu i.fa:before:hover {
color: #dddddd;
}


to the following in order to get the hover/transition working

Code: Select all

#gkHeaderMod .gk-short-menu i.fa:hover:before {
color: #dddddd;
}

Hi

Ok. This looks correct. Sorry for this mistake. Glad you've made it working.