Docs

Icons

Last modified on August 16, 2024 • 3 min read • 613 words
Share via
Configure secure access to icons from Bootstrap and Font Awesome.
Bootstrap Icons   Build Pipeline   Icons Definitions   Export Definitions   Font Awesome Icons  

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.

  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:

    $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.

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

  3. 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>

  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:

$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:

: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  .

On this page: