Создаем HTML виджет:
Ключ виджета: quick_access_menu
Заголовок: Меню быстрого доступа
Позиции для отображения: Список разделов: Боковая панель 30
Шаблон:
Как изменить вид кнопок?
В строке
изменяем button--link на button--primary, button--cta, button--alt или оставить пустым. Вид кнопок зависит от стиля.
Как убрать иконку Font Awesome?
В стороке
убираем <xf:fa icon="fa-bars" />
Как изменить иконку Font Awesome?
В стороке
изменяем fa-bars на свою
fontawesome.com
Ключ виджета: quick_access_menu
Заголовок: Меню быстрого доступа
Позиции для отображения: Список разделов: Боковая панель 30
Шаблон:
HTML:
<xf:css>
.block.quick-access-menu i {
margin-right: 5px;
}
.block.quick-access-menu .button {
max-width: 350px;
margin: 10px auto;
}
.block.quick-access-menu .block-row :first-child {
margin-top: 5px;
}
.block.quick-access-menu .block-row :last-child {
margin-bottom: 5px;
}
</xf:css>
<xf:set var="$quickAccessMenuButton" value="button--link" />
<div class="block quick-access-menu"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader"><xf:fa icon="fa-bars" />Меню быстрого доступа</h3>
<div class="block-body block-row">
<xf:button href="#" class="{$quickAccessMenuButton} button--fullWidth">Первый пункт</xf:button>
<xf:button href="#" class="{$quickAccessMenuButton} button--fullWidth">Второй пункт</xf:button>
<xf:button href="#" class="{$quickAccessMenuButton} button--fullWidth">Третий пункт</xf:button>
<xf:button href="#" class="{$quickAccessMenuButton} button--fullWidth">Четвертый пункт</xf:button>
</div>
</div>
</div>
В строке
PHP:
<xf:set var="$quickAccessMenuButton" value="button--link" />
Как убрать иконку Font Awesome?
В стороке
PHP:
<h3 class="block-minorHeader"><xf:fa icon="fa-bars" />Меню быстрого доступа</h3>
Как изменить иконку Font Awesome?
В стороке
PHP:
<h3 class="block-minorHeader"><xf:fa icon="fa-bars" />Меню быстрого доступа</h3>

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome
Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.