Как добавить свои стили (css) в скрипт Агути?

На данный момент мы используем не весь пакет Bootstrap Icons, а только те иконки, которые есть на сайте. Нет смысл загружать весь пакет (хотя это и проще).

Что делать, когда необходимо добавить другую иконку из набора Bootstrap Icons?

Рассмотрим пример. Например, нам нужна иконка: bi-bug:

См. https://icons.getbootstrap.com/icons/bug/

Нас из конструкции bi bi-bug интересует только вторая часть: bi-bug.

Мы хотим добавить иконку в награды и использовать её:

<i title="Тестер" class="bi bi-bug"></i>

А в файле: /resources/views/default/scss/icons.scss её нет.

А она должна быть там в таком виде:

.bi-bug::before { content: "\f1dc"; }

Что делать?

• Определим класс иконки, что нам необходим (в данном случае bi-bug).
• Ищем её код в файле: /public/assets/css/fonts/all-bootstrap-icons.css

Который содержит, что-то подобное:

.bi-123::before { content: "\f67f"; }
.bi-alarm-fill::before { content: "\f101"; }
... и т.д.

Если нам нужна иконка, например, bi-bug, то просто копируем её и добавляем в файл:

/resources/views/default/scss/custom.scss

Он по умолчанию пустой.

Далее:

• пересобираем свой css из админ-панели (Инструменты).
• Обновляем браузер и смотрим полученный результат.

Попробуем добавить другие стили в этот файл, чтобы закрепить навык использования своего CSS в проекте.

P.S. Класс иконки bi-bug был взять как пример. Он уже есть в файле icons.scss. Понятно, что подобное можно делать с любым css, назначая и/или переопределяя существующие стили.

Пример: добавим в файл custom.scss следующий код (первый, что нашел в браузере и что решил поменять):

p.m0.size-18 {
  color: red;
}

После того, как соберем и обновим кэш браузера увидим:

~