XenForo - Виджет меню быстрого доступа | Fi4a.ru

Создаем HTML виджет:
Ключ виджета: 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" />

изменяем button--link на button--primary, button--cta, button--alt или оставить пустым. Вид кнопок зависит от стиля.

Как убрать иконку Font Awesome?
В стороке

PHP:

<h3 class="block-minorHeader"><xf:fa icon="fa-bars" />Меню быстрого доступа</h3>

убираем <xf:fa icon="fa-bars" />

Как изменить иконку Font Awesome?
В стороке

PHP:

<h3 class="block-minorHeader"><xf:fa icon="fa-bars" />Меню быстрого доступа</h3>

изменяем fa-bars на свою

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.

fontawesome.com