Getting started

# Icon font

This article explains how to use, add or remove icons from the icon font in your project.

## Using icons

Icon fonts are commonly referenced in the `<head>` section of HTML documents to ensure they are preloaded correctly and styled as intended.

### Referencing icon Font in HTML

To include the icon font in your HTML files, insert the following lines in the `<head>` section:

    <!-- Font icons -->
    <link rel="preload" href="assets/icons/cartzilla-icons.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="assets/icons/cartzilla-icons.min.css">

### Applying icons in your HTML code

Icons can be applied within your HTML by using specific classes related to the icon's SVG file name. Here's a sample snippet on how to include an icon:

    <i class="ci-settings"></i>

## Adding new icons

To expand your icon font library by adding new icons, follow these steps:

1. Select the .svg icon: Choose the .svg icon you wish to add to the font library.
2. Format the icon: Ensure the icon is properly formatted. It should be placed within a 24x24px grid, with all strokes outlined and shapes unified. Tools like Adobe Illustrator or other vector graphics software are suitable for this task.
3. Save the icon: Store the new icon in the `src/icons` folder. Note, the output icon's CSS class will correspond to the SVG file name.
4. Generate the icon font: Execute the `npm run icon-font` command. This command runs a script that creates the `cartzilla-icons.woff2` font file and generates the corresponding `cartzilla-icons.min.css` file from the collection of `.svg` icons located in the `src/icons` directory.
5. Optional configuration changes: If you wish to change the output icon font name, modify the `config.icons.fontName` property in the `build/config.js` file. To change the prefix of the icon CSS class (default is "ci"), adjust the `config.icons.cssPrefix` property in the same config file. Ensure to update all relevant references in your HTML documents if any names are changed.

## Removing icons

To remove icons from your project:

1. Delete the icon(s): Remove the target `.svg` icon(s) from the `src/icons` folder.
2. Regenerate the icon font: Run the `npm run icon-font` command to update the icon font. This removes the deleted icons from the compiled font and the CSS file.

By following these steps, you can effectively manage the icons within your project, ensuring that your web application has a tailored and optimized set of icons at your disposal.

Top