Иконки темы Hugo HBS

Уже рассматривался вопрос и его решение про добавление пользовательских иконок, которых нет в наборе.

В данной теме используется свободно распространяемые наборы иконок FontAwesome v5. Зайдя на сайт в фильтре выбрать: free и solid потом в строке поиска написать ключевое слово по английски. Выбрать подходящую иконку, нажать на нее и посмотреть ее код, который должен начинаться с fas.

Список названий иконок, которые по умолчанию присутствуют в теме расположен в репозитории автора темы

Добавление иконки к разделу в меню

Для примера добавлю иконку в меню Категорий для раздела Игры поскольку подходящей иконки не нашлось в присоединенном наборе по умолчанию, подобрал иконку через поиск с сайта FontAwesome. Вот такой вид кода выдал сайт:

<i class="fas fa-gamepad"></i>

Из этого кода нужно только fa-gamepad. Который надо добавить в файл assets\icons\custom.js в две строки между фигурных и квадратных скобок. Название иконки должно быть с большой буквы, показан весь файл:

import { faBlog, faBook, faFile, faNewspaper, faServer, faLock, faCut, faGamepad, faCogs } from '@fortawesome/free-solid-svg-icons';
// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';

const icons = [
    faBook, faBlog, faFile, faNewspaper, faServer, faLock, faCut, faGamepad, faCogs
    // faAddressBook,
    // faAmazon, faGoogle,
];
export default icons;

Цвет иконки

Далее открыть файл с меню, в моем случае меню пока не в одном файле, а в каждом разделе content\category\game\_index.md

Добавить в строке icon: <i class="fas fa-fw fa-gamepad"></i> имя иконки через дефис обязательно и все с маленькой буквой.

По умолчанию иконка будет белой, что бы поменять цвет надо добавить text-success иконка будет синей.

  • text-success - зеленый
  • text-info- голубой
  • text-warning - темно желтый
  • text-danger- темно красный
  • text-primary - цвет выбранной палитры в меню сайта

Вот так в примере меню иконка Игры будет зеленой:

---
title: Игры
menu:
  main:
    parent: Категории
    weight: 3
    params:
      icon: <i class="fas fa-fw fa-gamepad text-success"></i>
---

Еще способ поменять цвет иконки

Данный способ имеет более широкую палитру цветов. Всю что предоставляет тема.

Пример:

icon: '<i class="fas fa-fw fa-gamepad" style="color: darkblue;"></i>'

В данном примере иконка будет темно синей darkblue.

Список цветов:

  • darkblue - темно синий
  • blue - синий
  • brown - коричневый
  • cyan - голубой
  • green - зеленый
  • indigo - темно фиолетовый
  • orange - темно желтый
  • pink - розовый
  • purple - фиолетовый
  • red - красный
  • teal темно зеленый
  • yellow - желтый