icons for linkedin and instagram...?

dieudonne

Hello,

is there a way to put other icon on the social position, like linkedin and instagram?

I see that the base code is

<a href="https://twitter.com/#" target="_blank"><i class="gk-icon-twitter"></i></a>

But are there icons for these social media ?

Thank you very much for any help.

Regard.

dominic

Hi,
At the moment, the NEWS 2 theme supported the FontAwesome 4.0. So, you can find the social icon here: https://fontawesome.com/v4.7.0/icons/
Regards,

dieudonne

Thank you very much. We added Instagram, youtube, and linkedin

And for the class, what can we do...? To be on the same line, with same parameters like the other one ?

And for the rollover, what can we put to replace the .i-gk-icon-.. ?

#gk-social a:active i.gk-icon-fb,
#gk-social a:focus i.gk-icon-fb,
#gk-social a:hover i.gk-icon-fb {
	color: #204385;
}
#gk-social a:active i.gk-icon-twitter,
#gk-social a:focus i.gk-icon-twitter,
#gk-social a:hover i.gk-icon-twitter {
	color: #2aa9e0;
}
#gk-social a:active i.gk-icon-gplus,
#gk-social a:focus i.gk-icon-gplus,
#gk-social a:hover i.gk-icon-gplus {
	color: #d3492c;
}
#gk-social a:active i.gk-icon-rss,
#gk-social a:focus i.gk-icon-rss,
#gk-social a:hover i.gk-icon-rss {
	color: #ea7054;

https://www.cire.be/

Thank you.

Regard.

Ps: I think this template must be updated (remove G+, add some more social network, ...)

dominic

Hi,
You can use the following code to fix the icon in the same line.

#gk-social i {
	font-size: 24px;
}

#gk-social a .fa:before {
    border: 1px solid #ddd;
    border-radius: 100%;
    font-size: 16px;
    padding: 3px 4px;
}

#gk-social a .fa {
    line-height: 54px;
}

[class^="gk-icon-"]:before,
[class*=" gk-icon-"]:before {
    line-height: 60px;
}

Note:: In the next version we will update this issue. and remove the G+ icon
Regards,

dieudonne

Thank you so much.

Just a last question: to make the rollover, how can we change the color ?

For the other icon, it is here:

#gk-social a:active i.gk-icon-fb,
#gk-social a:focus i.gk-icon-fb,
#gk-social a:hover i.gk-icon-fb {
	color: #204385;
}
#gk-social a:active i.gk-icon-twitter,
#gk-social a:focus i.gk-icon-twitter,
#gk-social a:hover i.gk-icon-twitter {
	color: #2aa9e0;
}
#gk-social a:active i.gk-icon-gplus,
#gk-social a:focus i.gk-icon-gplus,
#gk-social a:hover i.gk-icon-gplus {
	color: #d3492c;
}
#gk-social a:active i.gk-icon-rss,
#gk-social a:focus i.gk-icon-rss,
#gk-social a:hover i.gk-icon-rss {
	color: #ea7054;

But for new icon, I really don't know... If you have a idea to solve this it'll be great.

Regard.

dominic

Hi,
You can use the following code:

#gk-social a:hover i.fa-linkedin:before {
    color: #...;
    border-color: #...;
}

#gk-social a:hover i.fa-instagram:before {
    color: #...;
    border-color: #...;
}

#gk-social a:hover i.fa-youtube:before {
    color: #...;
    border-color: #...;
}

Hope this helps!