Jump to content

 

breezee

Member Since 15 Jan 2010
Offline Last Active Yesterday, 01:37 PM
-----

#190649 Google+ Glyph Icon

Posted by breezee on 26 August 2014 - 08:17 AM

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 https://icomoon.io/app/#/select
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 <i class="icon-new-1"></i>
13. Change their size or color if you need via css


#113064 Send product thumbnail on Facebook "Like"

Posted by breezee on 23 May 2011 - 08:00 AM

elogic,
You could check if {$product.main_pair.icon.image_path} work by viewing the page code in the browser. You could do this with Chrome Developer tools or Firefox Firebug plugin. If the {$product.main_pair.icon.image_path} changes to the correct path to your image then it works right.

I have my website domain connected to the facebook. May be you need this. To connect your domain to FB go to http://www.facebook.com/insights/
Click on the Green “Insights for your website” in the popup box you will be asked for some information and given a code snippet to add to your websites Meta Tags
Something like this:
<meta property="fb:admins" content="USER_ID"/>

Also you could check the page here
http://developers.fa...com/tools/lint/

Good luck :)