All media files in CS-Cart (i.e. images, fonts, flash) are stored in the following directory:
Icon fonts are widely used in CS-Cart. Icon font - a font every symbol of which is an icon.
Comparing with raster icons such approach has a number of benefits:
- Icon fonts are displayed legible on all devices screens (including retina).
- Icons are uploaded as one font file.
- It is possible to choose icon size and color.
- It is possible to apply modern CSS styles to an icon: shadows, transformations, and animation.
To make working with icons simple the Icomoon service is used in CS-Cart. Further we will describe how to add and edit icons.
- Go to www.icomoon.io.
- Run the application clicking IcoMoon App.
- Choose the desired icons and click the Font button below.
- Click the Download button below to download an archive.
- Unpack an archive to the following directory of your CS-Cart installation: design/themes/your_theme_name/media.
- Copy the contents of the icomoon/fonts directory to the design/themes/your_theme_name/media/fonts directory.
- Rename the style.css in the icomoon directory to the custom_icons.less file and copy it to design/themes/your_theme_name/css/tygh.
- Include the custon_icons.less file in the styles.less file with the
- Change the paths to the fonts and class names in the tygh/custom_icons.less file, if needed.
- Now, to use these icons in your text, you just have to create the html element of this type:
<i class="icon-user"></i> in the desired part of the text, where
icon-user is the corresponding icon class.