Adding more GK-Icons

Congratulations on this very nice template.
I would like to use the GK-Icons located in the Header (Menu / Specials / Gallery / Reservation / Location) but what I'm trying to do is not a restaurant website . So the dinner plate, burger and glass icons are not good for me. Although others gk-icons suck as Gallery, Location are perfect for my future use.
1) I tried using Fa-icons, but I cannot get them transparent when mouse-over. And the color by default seems black. Could not get css working to have them white AND transparent (0.6) when mouse-over.
2) I tried using a png , but got problem with resizing for tablet /phone. So this is not an option.

Is there a way to easily import or add other "general" gk-icons (from other Gavick templates? or other gk-icons?) to this Steak House template...maybe via additional files and using the override.css? If yes is there a step by step documentation?
Thank you for your help.
Jean

Hi,

will this help?
https://www.gavick.com/blog/the-easiest ... ial-icons/

Best,
Dirk

Hi,

will this help?
https://www.gavick.com/blog/the-easiest ... ial-icons/

Best,
Dirk

Thank you for your help but this is not what I'm looking as this apply only to "Social" Icons such as G+, Twitter, Facebook, etc.
Although not the solution I wanted, I finally worked out the CSS and used FA-Icons.
Regards,
Jean

Hi, Jean,
a have the same problem. Could you please give some hints how you did it?

Hi, Jean,
a have the same problem.

Could you please give some hints how you did it?

www.fyue.de/klettergarten-aicha

Thanks

Bernd

I have a similar problem. Changed icons selected from the http://fortawesome.github.io
I do not know how to adjust their appearance.

Code: Select all

<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#oferta"><i class="fa fa-circle-o"></i> <span>Oferta</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"><i class="fa fa-circle-o-notch"></i> <span>Specjalne</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"><i class="gk-icon-gallery-solid"></i> <span>Galeria</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="index.php/reservation"><i class="fa fa-question"></i> <span>Pytanie</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><i class="gk-icon-map-path-solid"></i> <span>Lokalizacja</span></a></li>
</ul>

Regards.
J

How to change color

Code: Select all

fa-circle-o:before {
color: #ffffff !important;
}


now how to add shadow and transparency?

Ok
I found a solution removed the code from the file typography.style1.css.
line 437 (color)

Code: Select all


[class^="fa fa-"],
[class*=" fa-"] {
   /*   color: #272727;  */
        padding-right: 8px
}


Everything works and looks great

I found a solution removed the code from the file typography.style1.css.

You don't have to remove it from there - it will render use of fa- class useless overywhere in the text. Solution is this: Put on override.css this code:

Code: Select all

#gkHeaderMod .fa {
    color: white;
    font-size: 54px !important;
    padding-right: 0;
}

#gkHeaderMod .fa:hover {
    color: rgba(255, 255, 255, 0.6);
}

and turn overridde.css on in template settings. One thing I still wasn't able to fix, is to align fa icons with gk icons. Here http://tortik34.ru/ you can see that first and fourth icons (fa-) are slightly lower compared to other (gk-) icons. Any tip?