Joomla Templates Club 406,261 posts

[addinspiration Friend addinspirationJoin date: September 2012Posts: 24Downloads:0Uploads:1 Thanks: 9 Thanked: 4 times in 1 posts]

#184873

Hey,

Could someone tell me how can i add google+ icon to the social icon list?
– what I need to do to make it work?
– Does anyone have g+ icon ?

Thank for the help in advance

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#483098

Hi

The social icons is a custom-html module you can find settings in the Ja-Ironis user guide HERE

Add a new image and then make a new link as showed in that module, it’s simple

[addinspiration Friend addinspirationJoin date: September 2012Posts: 24Downloads:0Uploads:1 Thanks: 9 Thanked: 4 times in 1 posts]

#483100

actually I made it like that, but for some reason I cannot see the “icon”..
– the link works
– and it can find the text, but cannot see the icon.. :((

Could you help me what I need to modidy to make it work.
– please take a look at my site: http://www.expa.fi

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#483110

HI

In your/ templates/ja_ironis/css/template.css seems to be missing the style for the icon google+ at line 1071 of that file you have

/* Top Bar Right ---*/
#ja-topbar-right { float: right; }

ul.social-links { float: right; margin: 0; padding: 0; }

ul.social-links li {
background: none;
display: block;
float: left;
margin: 0;
padding: 0;
}

ul.social-links .icon-social {
display: block;
font-size: 0;
height: 20px;
line-height: 0;
margin-left: 5px;
margin-right: 0;
text-indent: -9999em;
width: 20px;
}

ul.social-links .icon-social.icon_rss { background-image: url(../images/rss.png); }

ul.social-links .icon-social.icon_facebook { background-image: url(../images/facebook.png); }

ul.social-links .icon-social.icon_twitter { background-image: url(../images/twitter.png); }

ul.social-links .icon-social.icon_inner { background-image: url(../images/inner.png); }

ul.social-links .icon-social.icon_vimeo { background-image: url(../images/vimeo.png); }

ul.social-links .icon-social:hover,
ul.social-links .icon-social:focus { background-position: left bottom; }


you need to add

ul.social-links .icon-social.icon_googleplus { background-image: url(../images/gplus.png); }

add your google icon named gplus.png in the images folder

After you have changed this in the custom-html module change the link for google+

<li class "link"><a class="icon-social icon_googleplus" href="#" title="Google+"Google+</a></li>

2 users say Thank You to pavit for this useful post

1. addinspiration
2. Saguaros

[addinspiration Friend addinspirationJoin date: September 2012Posts: 24Downloads:0Uploads:1 Thanks: 9 Thanked: 4 times in 1 posts]

#483111

cheers mate!

Actually the problem seem to be that it did not understand ico.google+ …it needed to be ico.googleplus 😉

1 user says Thank You to addinspiration for this useful post

1. Saguaros

[Author]

Posts