social icons on news2 template

Hi,

I need to change the social icons near LOG IN button and have Facebook, Youtube and vimeo. For the moment I only deleted twitter and google+, and changed the link of the facebook icon but the elements changed their layout. You can see on www.lodicitta.it/gavick_news2 what I mean.
How can I reset them at original size? And where can I add the more icons I need?
As editor I am using JCE as default.
Thank you very much for your very precious help.

can someone please help me?

Hi

Icons require some html5 options which are stripped by joomla editors. Please disable using editor in user settings and make changes to code there. Here is orginal code You should use from clean installation:

Code: Select all

<div class="custom ">
<a target="_blank" href="https://plus.google.com/+gavickpro?rel=author"><i class="gk-icon-gplus"></i></a>
<a target="_blank" href="https://twitter.com/gavickpro"><i class="gk-icon-twitter"></i></a>
<a target="_blank" href="https://www.facebook.com/gavickpro"><i class="gk-icon-fb"></i></a>
<a target="_blank" href="http://www.gavick.com/magazine/?format=feed&amp;type=rss"><i class="gk-icon-rss"></i></a>   
</div>


You can change the url there. About the icons You may use Font Awsome. http://fortawesome.github.io/Font-Awesome/icons/ here You can find available icons and instruction how to use it.

Thank you teitbite. Now all is fine.

Hi

No problem. Glad I could help

Hello - I've got the same issue with the News2 template. I wanted to add a YouTube icon but see that Font Awesome is now the preferred choice. I switched to their social media icons, but how do get them to change color on mouse over like the original gk-icons did?

Hi

Please show me Your site.

Thanks for the reply. My test site is at stnbeta.com. We're currently using the original gk-icons, but would rather switch over to the preferred Font Awesome ones.

Hi

I still can see the regular gavick icons but the code to change on mouse over for twitter icon is:

Code: Select all

#gkSocial a:active i.gk-icon-twitter, #gkSocial a:focus i.gk-icon-twitter, #gkSocial a:hover i.gk-icon-twitter {
    color: #2AA9E0;
}


If You want to add a YouTube icon than You can find a direct code for this icon here: http://fortawesome.github.io/Font-Awesome/icon/youtube/, than a color change with a code proposed by font awsome will looks like this:

Code: Select all

.fa-youtube:hover,
.fa-youtube:active,
.fa-youtube:focus {
    color: pink;
}


Thank you for your help! I did have to make a change to the code before it would work:

Code: Select all

.fa-youtube:hover:before,
.fa-youtube:active,
.fa-youtube:focus {
    color: #CD332D;
}

I also found all of the "official" social media colors here:
http://simpleicons.org/

Hi

hover:before ?? Ok, that's interesting. Thank You for the information.

Hi Just following on from this,

I would like to add instagram, pinterest, linkedin and youtube social icons next to the 3 default ones,

Can you help to how this is achieved? Where are the extra icons?

Thank you
Pd

Hi

You can use Font Awsome to add icons. For example pintrest icon:

HTML to add to module:

Code: Select all

<a class="fa fa-pinterest" href="#">Pinterest</a>


CSS code to add to override.css (override needs to be enabled in template settings)

Code: Select all

.fa {
    font-size: 2em;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.fa-pinterest:before {
    content: "\f0d2";
}


I have read the posts above but it seems I don't really understand how I can change the default gk icons to Font Awesome icons.

My site test site is http://2014.myjcr.com...can you please give me the code I can paste into the custom html module to enable me have icons for:

- Facebook
- Twitter
- and Youtube?

Hi

Now I just had a better idea It would be much easier to change the code in custom module to:

Code: Select all

<a href="https://twitter.com/myjcr" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.facebook.com/myjcr" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.facebook.com/myjcr" target="_blank">
<i class="fa fa-rss"></i>
</a>


this way the font awsome already included to site will be used.

Thank you. It worked for me.

Hi

Sorry I haven't thought about that before. This is much simplier solution

Sorry guys, but where do you modify the code in order to change/add/delete icons and related links?

Hi

It's a custom html module published in "social" module position.