# Icons

Configure secure access to icons from Bootstrap and Font Awesome.

Hinode processes the Bootstrap icons to ensure they adhere to the strict [content security policy](server-headers). In addition, it provides access to the free icons of [Font Awesome](https://fontawesome.com).

## Bootstrap icons

Bootstrap uses various embedded vector images (in SVG (Scalable Vector Graphics)
 format) throughout its Sass source files. Hinode replaces these embedded images with file-based vector images, as the [content security policy](server-headers) prohibits loading of embedded images. To ensure the images are consistent with the [theme colors](../configuration/colors), the images are postprocessed using [Hugo templating](https://gohugo.io/templates/introduction).

### Build pipeline

Hinode uses mounted folders to create a flexible virtual file system that is automatically kept up to date. Review the [overview](overview) for a detailed explanation. The build pipeline of the Bootstrap icons consists of four steps. It is intertwined with the [build process for the stylesheets](styles).

1. **Override the inline Bootstrap icon definitions**

   Replace the default inline icon definitions within the Bootstrap Sass files with references to local vector images. Use the file `assets/scss/common/_icons.scss` to ensure the definitions take precedence over the default Bootstrap values. For example, the following statement updates the value of the `$form-switch-focus-bg-image`:

   ```scss
   $form-switch-focus-bg-image: url("icons/form-switch-focus-bg-image.svg") !default;
   ```

2. **Export the Sass variables**

   Export the required Sass variables by defining them in the `assets/scss/common/_export.scss` file. Hinode converts the variable names from kebab case to snake case to make them compatible with Hugo's variable naming convention. For example, the css variable `--form-switch-focus-color` is exposed as `.form_switch_focus_color` to the Hugo templates.

   ```scss
   :hinode-theme {
       --form-switch-focus-color: #{$form-switch-focus-color};
   }
   ```

3. **Reference the Sass variables within each icon file**

   Use [Hugo templating](https://gohugo.io/templates/introduction) to reference the Sass variables for fill colors and stroke colors. For example, the file `assets/icons/form-switch-focus-bg-image.svg` defines the fill color as `{{ .form_switch_focus_color }}`. The entire vector definition is as such:

   ```html
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
       <circle r='3' fill='{{ .form_switch_focus_color }}'/>
   </svg>
   ```

4. **Process the icon files**

   Add the local icon files to the `assets/icons` folder with a filename as defined in step 1. The partial `partials/head/stylesheet.html` calls the partial `partials/head/icons.html` to process all icon files with the `.svg` extension recursively. The output is stored in the `icons` folder within the output directory (usually `public` when building the site). The icon files are referenced in the main stylesheet automatically.

### Icons definitions

The icons are defined in the file `assets/scss/common/_icons.scss`. The current configuration is the following:

```scss
$form-check-input-checked-bg-image:             url("#{$base-url}icons/form-check-input-checked-bg-image.svg") !default;
$form-check-radio-checked-bg-image:             url("#{$base-url}icons/form-check-radio-checked-bg-image.svg") !default;
$form-check-input-indeterminate-bg-image:       url("#{$base-url}icons/form-check-input-indeterminate-bg-image.svg") !default;
$form-switch-bg-image:                          url("#{$base-url}icons/form-switch-bg-image.svg") !default;
$form-switch-bg-image-dark:                     url("#{$base-url}icons/form-switch-bg-image-dark.svg") !default;
$form-switch-focus-bg-image:                    url("#{$base-url}icons/form-switch-focus-bg-image.svg") !default;
$form-switch-checked-bg-image:                  url("#{$base-url}icons/form-switch-checked-bg-image.svg") !default;
$form-select-indicator:                         url("#{$base-url}icons/form-select-indicator.svg") !default;
$form-select-indicator-dark:                    url("#{$base-url}icons/form-select-indicator-dark.svg") !default;
$form-feedback-icon-valid:                      url("#{$base-url}icons/form-feedback-icon-valid.svg") !default;
$form-feedback-icon-invalid:                    url("#{$base-url}icons/form-feedback-icon-invalid.svg") !default;
$navbar-light-toggler-icon-bg:                  url("#{$base-url}icons/navbar-light-toggler-icon-bg.svg") !default;
$navbar-dark-toggler-icon-bg:                   url("#{$base-url}icons/navbar-dark-toggler-icon-bg.svg") !default;
$accordion-button-icon:                         url("#{$base-url}icons/accordion-button-icon.svg") !default;
$accordion-button-icon-dark:                    url("#{$base-url}icons/accordion-button-icon-dark.svg") !default;
$accordion-button-active-icon:                  url("#{$base-url}icons/accordion-button-active-icon.svg") !default;
$accordion-button-active-icon-dark:             url("#{$base-url}icons/accordion-button-active-icon-dark.svg") !default;
$carousel-control-prev-icon-bg:                 url("#{$base-url}icons/carousel-control-prev-icon-bg.svg") !default;
$carousel-control-next-icon-bg:                 url("#{$base-url}icons/carousel-control-next-icon-bg.svg") !default;
$btn-close-bg:                                  url("#{$base-url}icons/btn-close-bg.svg") !default;
$btn-toggle:                                    url("#{$base-url}icons/btn-toggle.svg") !default;
$btn-toggle-dark:                               url("#{$base-url}icons/btn-toggle-dark.svg") !default;
```

### Export definitions

The exported variables are defined in the file `assets/scss/common/_export.scss`. The current configuration is the following:

```scss
:hinode-theme {
    --accordion-icon-active-color: #{$accordion-icon-active-color};
    --accordion-icon-active-color-dark: #{$gray-300};
    --accordion-icon-color: #{$accordion-icon-color};
    --accordion-icon-color-dark: #{$gray-600};
    --btn-close-color: #{$btn-close-color};
    --btn-toggle-color: #{$btn-toggle-color};
    --btn-toggle-color-dark: #{$gray-600};
    --carousel-control-color: #{$carousel-control-color};
    --form-check-input-checked-color: #{$form-check-input-checked-color};
    --form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
    --form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
    --form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
    --form-select-indicator-color: #{$form-select-indicator-color};
    --form-select-indicator-color-dark: #{$form-select-indicator-color-dark};
    --form-switch-checked-color: #{$form-switch-checked-color};
    --form-switch-color: #{$form-switch-color};
    --form-switch-color-dark: #{$form-switch-color-dark};
    --form-switch-focus-color: #{$form-switch-focus-color};
    --navbar-dark-color: #{$navbar-dark-color};
    --navbar-light-icon-color: rgba($body-color, 0.75); // TODO: See https://github.com/twbs/bootstrap/pull/37720
}
```

## Font Awesome icons

[Font Awesome](https://fontawesome.com) provides a collection of icons to be used freely on websites and other media. See the [icons documentation](../content/icons) in the content section on how to use them to style your website. Hinode uses the CSS (Cascading Style Sheets)
 files and web fonts of Font Awesome, as the [content security policy](server-headers) prohibits the inline execution of stylesheets by the JavaScripts of Font Awesome. By default, the CSS files are bundled with the main stylesheet. The web fonts are mounted in the `/static/fonts` folder. The various files are provided by the [Font Awesome module on GitHub](https://github.com/gethinode/mod-fontawesome).