Icons¶

Summary¶

By default, icons are managed through the extensions/icons package, but you can replace or customize them to fit your store's needs by using the following steps to update them through IcoMoon's App

The icon variables are imported in scss/config/_variables.scss file

// Fonts: Icons
@import "extensions/icons/lib/webfont/variables";
$font-family-icons: ($icomoon-font-family, sans-serif);

The icon CSS is imported in Global.scss file:
- generator-quickstart/app/templates/themes/genesis/src/pages/Global.scss:
```
@import "extensions/icons/index";
```

If you would like to replace or add any icons to the included set of icons, you can do that by following this process.

Download the selection.json
- This file was file that was generated by IcoMoon's App and is essential for keeping the same settings & icon-names
Import the selection.json file into IcoMoon's App by clicking the "+ Import Icons" in the top-left corner
Select "Yes" when it prompts you with, "Your icon selection was loaded. Would you like to load all the settings stored in your selection file?"
In the "Selection" mode of the app feel free to add more icons from the IcoMoon Library
If you plan on replacing any existing "Genesis-Icons", unselect the icon, and take note of it's icon-code (ex. chevron-down). Later, you will need to name the new icon with the same icon-code.
- You can reference the icons & their codes here
After configuring your icon-set, click the "Generate Font" button
Review the icons & names to make sure they are all valid & helpful
- If you removed any "Genesis-Icons", find the new/replacement icon and give it the same icon-code as the one it is replacing
Click the settings-gear-cog next to the "Download" button and give your icon-font a unique name. (ex. Genesis-Icons--My-Theme)
Click the "Download" button

Note

Review the changes in this commit to see a breakdown of the changes that are described in this step

Create a new webfont directory in the src folder of your framework's theme (ex. themes/genesis/src/webfont/)
Unzip the zip file that was downloaded from IcoMoon
Copy the unzipped folder into your new webfont directory (ex. themes/genesis/src/webfont/Genesis-Icons--My-Theme/)

In themes/genesis/_variables.scss, import your variables:

@import "webfont/Genesis-Icons--My-Theme/variables";
$font-family-icons: ($icomoon-font-family, sans-serif);

In themes/genesis/pages/Global.scss, replace the @import "extensions/icons/index"; line with an import to your new custom webfont: @import "webfont/Genesis-Icons--My-Theme\style";

Follow the steps outlined above to Create a Custom IcoMoon Font
Additionally download the SVG files by using the "Generate SVG and more" link on the IcoMoon App.
Unzip the zip files that was downloaded from IcoMoon
Delete everything in packages/icons/lib/webfont/ and replace it with the contents of the zip-file that was extracted & downloaded from IcoMoon
Delete everything in packages/icons/lib/svg/ and replace it with the contents of the zip-file that was extracted & downloaded from IcoMoon from the "Generate SVG and more" link