Media files¶

Directory structure¶

• images
  • addons - all images extended by your add-on are stored in the addons/your_addon_name/ directory.
  • lib - images added by side libraries (jqueryui, for example).
  • icons - icons and gif animation (spinner or pointers, for example).
  • patterns - background images added with the Theme Editor.
• fonts - icon fonts (see more information below).

Icon Fonts¶

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 @import directive:

@import "custom_icons.less";

• 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.