Game News Social Module Icons

Hello forum,

I've been trying to change the icons on the social module on GameNews template. I noticed that on the backend on the module that it just has the text "facebook" and on the frontend it has the facebook icon. But I am trying to have my own icons. The way I tried doing it is simply by just deleting the text facebook and adding an image file but that didn't work. I still get the facebook icon. Check out the pictures so you can see how I want it to appear.

Hi,
if you go to custom html module published in social position you will find this code

Code: Select all

<a class="gkFb" href="#">Facebook</a> <a class="gkTwitter" href="#">Twitter</a> <a class="gkGplus" href="#">Google+</a> <a class="gkRss" href="#">RSS</a>


As you see each href has class attribute. This attribute is used to connect each item with specyfic css rules. So if you only change text, rules are still same. You need to add own css rules to display new icons.

Hello Konrad, how would I add my own css rules for insagram? Sorry I am not that great with codes

Code for existing icons you can find in css/template.css file. And your own code please add to override.css. And then remember to enable override.css option in template settings.

Thanks for the reply Konrad. Is there any way to no make it that complicated to add more social icons on that social module (topbar)? Just for the future if I want to add something else, in this example Instagram. The simple way I want it to be is to just edit it on the actual module, add a social picture that I want to use and add a link.

Custom html module let you add html code. So you can try add your icon directly in this module and link it to your social account. Then you don't need use css code.

I tried adding my icon directly into this module but the dark facebook icon that's on this website keeps appearing. No matter what icon I try putting, the dark facebook icon keeps appearing.

Please give me url to your website. And remember add your icon.

My website is http://www.freshfitment.com

Check out how the social module looks like on the front end.

And this is how I got it on the backend:

Please add this to override.css

Code: Select all

#gkTopBar .social-icons a {
border-left: none !important;
background: none !important;
text-indent: 0px !important;
}


and remember to enable override.css option in template settings.

It worked! Thanks Konrad!