Customize CSS fonts icons

[matteopedani]

How to add custom css or new external css code?
How to add custom fonts or new external fonts code?
How to add custom icons or new external icons code?
Where are the files to customize?
I'm new of npm and maybe, look like a silly question.

[holger1411]

Hi !
sorry for my late reply 🙄
To your questions:
How to add custom css or new external css code?
/src/scss/themes/base/_style-theme.scss
is the right place to add some custom stuff. I add already some custom stuff on top of Bootstrap there, but you can overwrite, extend, delete it whatever.

If you want to use a extra (s)css file create a new one in src/scss/themes/base/, for example called mystuff.scss
Thant open src/scss/theme.scss and add
@import "themes/base/mystuff";

You can also create a new theme with everything new (other BS version, other variable overwrites, own styles etc.) by creating a new folder in src/scss/themes
and load it via themes.scss

How to add custom fonts or new external fonts code?
It depends what you want to load where. For example you can load a Google font by adding:

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap'); </style>

into
src/scss/theme.scss

or link it in your HTML header like adding this:

to:
src/_includes/snippets/head.njk

Than overwrite the Bootstrap font variable by adding this:
$font-family-sans-serif: "Roboto";
to /src/scss/themes/base/_variables-themes.scss

How to add custom icons or new external icons code?
Its the same like above: it depends. Do you want to use an CDN provided font/set create a link in your SCSS or HTML file(s)