Добавить иконку в кнопку поиска по новостям в Битрикс

Штатная кнопка поиска в компоненте bitrix:search.form подписана словом «Найти». Дизайну часто нужна вместо текста иконка лупы. Задача простая, но у неё есть правильный способ (доступный и на inline-SVG) и устаревший (иконочный шрифт с юникод-символом в языковом файле). Разберём оба и объясним, почему иконка не должна лишать кнопку смысла для скринридеров.

Сначала – копируем шаблон компонента

Золотое правило Битрикса: никогда не редактируйте файлы в bitrix/components – обновление ядра их перезапишет. Скопируйте шаблон компонента поиска в свой шаблон сайта, например в /local/templates/ВАШ_ШАБЛОН/components/bitrix/search.form/.default/ (или в bitrix/templates/.default/..., как в исходной версии заметки). Дальше правим только эту копию – template.php и style.css рядом с ним.

Способ 1 (рекомендуется): кнопка с inline-SVG

Самый чистый и доступный вариант – в template.php заменить <input type="submit"> на <button type="submit"> с иконкой-SVG внутри. В отличие от input, тег button может содержать вложенную разметку, а атрибут aria-label сохранит текстовую подсказку для скринридеров:

<button type="submit" class="search-form__submit" aria-label="Найти">
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
    </svg>
</button>

Почему так лучше: aria-hidden="true" прячет декоративную иконку от скринридеров, а aria-label="Найти" озвучивает назначение кнопки. fill="currentColor" заставляет иконку наследовать цвет текста – перекрасить её можно обычным color в CSS. Никакого внешнего шрифта подключать не нужно, SVG уже в разметке.

Способ 2: иконочный шрифт (Font Awesome)

Если проект уже подключает Font Awesome, иконку можно вывести через псевдоэлемент. Важно: <input> – заменяемый элемент, у него псевдоэлементы ::before / ::after не работают. Поэтому и здесь кнопку делаем тегом <button>, а символ иконки подставляем в CSS:

.search-form__submit {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* solid-начертание */
    font-size: 0;     /* прячем возможный текстовый ярлык */
}
.search-form__submit::before {
    content: '\f002'; /* юникод лупы: fa-magnifying-glass (в FA4/5 – fa-search) */
    font-size: 20px;
}

Этот способ и описывала исходная заметка 2017 года, только тогда шрифт назывался 'FontAwesome', а класс иконки – fa-search (код f002). В Font Awesome 6 семейство переименовано в Font Awesome 6 Free, а лупа называется fa-magnifying-glass – сам юникод f002 сохранился.

Про правку языкового файла – так лучше не делать

В старом рецепте текст «Найти» заменяли прямо в языковом файле (lang/ru), вставляя туда юникод-символ иконки. Сегодня это считается плохой практикой: языковой файл отвечает за перевод, а не за внешний вид, и юникод-символ в нём ломает доступность и локализацию. Отделяйте оформление (CSS/SVG) от текстовых сообщений: подпись «Найти» оставьте в lang-файле и используйте её как aria-label, а иконку добавляйте в шаблоне или стилях.

Доступность и подводные камни

• Кнопка без текста должна иметь ярлык. Иконка без aria-label (или скрытого текста) – это кнопка «без имени» для скринридера. Всегда добавляйте aria-label="Найти".
• Область клика. Иконка мелкая – задайте кнопке достаточные padding и минимальный размер (примерно 44×44 px), чтобы по ней было удобно попадать на мобильных.
• Шрифт не подключён. Если при способе 2 вместо иконки виден «квадрат» или буква – Font Awesome не загружен или указано неверное имя семейства/начертание (font-weight: 900 для solid).
• Кэш шаблона. После правки template.php сбросьте кэш компонента и очистите кэш браузера – Битрикс кэширует отрендеренные шаблоны, и старая кнопка может «залипнуть».
• Никаких эмодзи вместо иконки. Эмодзи-лупа выглядит по-разному в разных ОС и не масштабируется под дизайн – используйте SVG или иконочный шрифт.

Смежные доработки поиска и вывода списков – в гайдах «Количество элементов в результатах поиска по новостям» и «Новый шаблон постраничной навигации». Другие приёмы правки шаблонов и меню – «Добавить вручную подпункт в подменю» и «Отключить переходы по пунктам меню на мобильных».