Icons

Share via

Link copied to clipboard

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. In addition, it provides access to the free icons of Font Awesome .

Bootstrap Icons

Bootstrap uses various embedded vector images (in SVG format) throughout its Sass source files. Hinode replaces these embedded images with file-based vector images, as the Content Security Policy prohibits loading of embedded images. To ensure the images are consistent with the Theme Colors, the images are postprocessed using Hugo Templating .

Build Pipeline

Hinodes uses mounted folders to create a flexible virtual file system that is automatically kept up to date. Review the 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.

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:
```
$form-switch-focus-bg-image: url("icons/form-switch-focus-bg-image.svg") !default;
```
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.
```
:hinode-theme {
    --form-switch-focus-color: #{$form-switch-focus-color};
}
```
Reference the Sass variables within each icon file

Use Hugo Templating 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:
```
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
    <circle r='3' fill='{{ .form_switch_focus_color }}'/>
</svg>
```
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:

assets/scss/common/_icons.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:

assets/scss/common/_export.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 provides a collection of icons to be used freely on websites and other media. See the Icons Documentation in the content section on how to use them to style your website. Hinode uses the CSS files and web fonts of Font Awesome, as the Content Security Policy 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 .

• Adapt notation required by render hook for markdown links (a1606f0)

On this page:

Docs

Bootstrap Icons

Build Pipeline

Icons Definitions

Export Definitions

Font Awesome Icons