Google+ Glyph Icon

Hi,

Does anyone knows how to add google+ icon so i can add it to footer “get social” link??

I tried by adding right after “.ty-icon-facebook,”

<br />
.ty-icon-google-plus<br />

```<br />
and also added<br />
```php
<br />
.ty-icon-google-plus:before {<br />
	content: "\e602";<br />
}<br />

```<br />
but no luck.<br />
<br />
Found on this website google+ icon <img src="upload://rA9Qa8gnUPZzRZRdI8kt3dpjkrs.png" class="bbc_emoticon" alt=":)"><br />
[url="http://www.webgraphiq.com/"]http://www.webgraphiq.com/[/url]<br />
<br />
thanks,<br />
<br />
PS<br />
I did add font-awesome icons and it's really awesome, but would prefer to use original icons on get social link.<p><a href="127.0.0.1/uploads/monthly_08_2014/post-9178-0-70154100-1408988029.jpg">icons.jpg</a></p>

I add new icons or change the existing ones the next way:

  1. First get the *.svg version of the new icon. You may export any vector to *.svg via Adobe illustrator.
  2. Go to [url=“IcoMoon App - Icon Font, SVG, PDF & PNG Generator”]IcoMoon App - Icon Font, SVG, PDF & PNG Generator
  3. Import current cs-cart icons (/design/themes/your_theme/media/fonts/glyphs.svg) and your new *.svg icon to icomoon.
  4. Select imported icons. You may also want to select some from icomoon if you like them
  5. Click Font button at the bottom
  6. Check codes of some old icons. I know codes of some existing icons and just check if they stay the same. Remember the codes of the new icons, you will need them later
  7. Click Download.
  8. Make a backup copy of your current font files glyphs.svg, glyphs.eot, glyphs.ttf, glyphs.woff
  9. Rename icomoon files from the font folder of the downloaded archive to glyphs.* . Copy them to your server overwriting the existing ones.
  10. If you add new icons, you need new classes for example .icon-new-1, .icon-new-2. Add to your *.css or *.less file the next code. If you just changing the existing ones then skip this


.icon-new-1, .icon-new-1:before, .icon-new-2, .icon-new-2:before {
font-family: 'glyphs';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}


11. Add codes for the content of the classes.

.icon-new-1:before {
content: "\e001"; // The code for the new icon
}
.icon-new-2:before {
content: "\e002"; // The code for the new icon
}
.icon-old:before {
content: "\e003"; // The code for the old icon
}



12. Use it in your templates with

13. Change their size or color if you need via css

thanks breezee! :)

will look into it today!

good explanation breezee, I'll try to do this too.

I am going to go through these steps, however I would love to see the following included in future versions:



Pinterest

Instagram

Google+

LinkedIn



Thanks,

Jack

Thanks very much for the detailed reply. Will give it a whirl

Hi i upload glyph from my theme but the metadata of icons not included when i export the svg file

Anyone know how to use jpegs instead of glyphs? I'd like to use the proper full color icons for facebook, instagram, etc.