Media Files

Venddor IO organizes and stores all media content, encompassing images, fonts, and flash components, in a designated directory:

design/themes/your_theme_name/media

Furthermore, for email-specific media, there's an isolated directory:

design/themes/your_theme_name/mail/media

Breaking Down the Directory Architecture

1. images:

   addons: Every image extension facilitated by your add-on is neatly housed in addons/your_addon_name/.

   lib: A repository for images ushered in by third-party libraries, such as jqueryui.

   icons: A dedicated space for iconography, which includes elements like spinners and pointers.

   patterns: Houses background visuals, primarily those added through the Theme Editor.

2. fonts:

   This is the go-to place for icon fonts. For a clearer understanding of icon fonts, read on.

Decoding Icon Fonts in Venddor IO

Icon fonts are integral to Venddor IO. Essentially, every character in this font translates to an icon. This methodology has some distinct advantages:

• Icon fonts boast impeccable clarity across all screen types, including high-resolution ones.
• They consolidate multiple icons into a singular font file, optimizing loading times.
• Personalizing icon parameters like color and size becomes effortless.
• Contemporary CSS embellishments, such as shadows or animations, can be applied to icons.

To make the icon integration seamless, Venddor IO harnesses the prowess of the Icomoon service. Here's a step-by-step guide to assimilating and customizing icons:

1. Visit www.icomoon.io and initiate the IcoMoon App.
2. Curate your desired icons and proceed by clicking the Font option.
3. Proceed to download your collection by tapping the 'Download' button.
4. Extract the downloaded archive into: design/themes/your_theme_name/media.
5. Migrate content from icomoon/fonts to design/themes/your_theme_name/media/fonts.
6. Rename style.css within the icomoon directory to custom_icons.less and move it to design/themes/your_theme_name/css/tygh.
7. Integrate custon_icons.less into styles.less using the @import directive: @import "custom_icons.less";.
8. Tweak paths to the fonts and class names in tygh/custom_icons.less as necessary.