social buttons on footer

In the WordPress-Template "Quark" there is a div-class named "gk-footer-social-icons" which allows to place social icons on the footer. Discussed in the following post: https://www.gavick.com/forums/quark-wp/ ... ns#p233286
When I try to paste the code in the Steak House-Templates copyright field nothing happens. Is it possible to place social icons on footer ?

Hi

Yes it's possible, but instead of usina our classes for icons use icons from Font Awsome http://fortawesome.github.io/Font-Awesome/icons/

So code will look more like this:

Code: Select all

<div class="gk-footer-social-icons">
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-googleplus"></i></a>
<a href="#"><i class="fa-instagram"></i></a>
</div>
 © 2007-2015, GavickPro<br> is an authorized retailer for goods provided by Quark Store


Thank you for response. I paste the code in the copyright-field and add some text. My code looks as follows:

Code: Select all

<div class="gk-footer-social-icons">
<a href="https://www.facebook.com/pages/Die-Saftpresse/559226734112696?fref=ts"><i class="fa fa-facebook"></i><span>BESUCHE UNS AUF FACEBOOK</span></a>
<a href="https://twitter.com/DiE_SAFTPRESSE"><i class="fa fa-twitter"></i><span>FOLGE UNS AUF TWITTER</span></a>
<a href="http://install.diesaftpresse.de/#gkBottom4"><i class="fa fa-envelope"></i><span>KONTAKT</span></a>
<a href="http://install.diesaftpresse.de/index.php/impressum"><i class="fa fa-info-circle"></i><span>IMPRESSUM</span></a>
</div>

Unfortunately the text comes straight behind the icons instead of underneath them like in the header where I use the "gk-short-menu"-class.
My URL is: http://install.diesaftpresse.de/

Hi

Add this to override.css to fix this :

Code: Select all

#gkCopyrights .fa {
display: block;
}

#gkCopyrights a {
    display: inline-block;
    margin: 0 15px;
}


Works fine, thank you.
I would like to know another thing: for the footer-icons I use font awesome-fonts just like for the header section.
What I'd like to do is to give both different colors/sizes. When I change the code in in "typography.style2.css" the font awesome is changing generally. Whenever I use it only one style is possible.

Hi

Try add to css a code like:

Code: Select all

.fa-facebook { color: blue; }
.fa-twitter { color: red; }


When I give ".fa-envelope" another color for example it changes the icon everywhere in my template. Whenever I use the icon it has the one definied color.
In my case I want to use the fa-envelope-icon in the header (white color) and in the footer (dark color).

Hi

Use this instead:

Code: Select all

#gkHeaderMod .fa-envelope::before {
color: #fff;
}


Works properly but there is still a problem with this "fa-envelope"-icon in the footer. It seems it has the same properties like the one in the header (white instead of dark).

Hi

That's because You haven't added the code as I wrote it. You are still missing #gkHeaderMod before the class:

Code: Select all

#gkHeaderMod .fa-envelope::before {
color: #fff;
font-size: 50px;
}


this prefix will make this code change only the icon in header and not the footer one, so remove the override for both You have now.

Thank's, I forgot to add "#gkHeaderMod" before each header-icon. Topic solved.

Hi

Great to hear that. I'm closing it than.