Добавить иконку в кнопку поиска по новостям в Битрикс
Инструкция7 мин 43 Обновлено 22 июля Сложность: Средняя
TL;DR
- Шаблон компонента search.form копируем в свой шаблон – файлы ядра править нельзя.
- Лучший способ: заменить input на button с inline-SVG и aria-label="Найти".
- У input псевдоэлементы ::before/::after не работают – иконочный шрифт вешаем на button.
- В Font Awesome 6 семейство – 'Font Awesome 6 Free', лупа – fa-magnifying-glass (юникод f002).
- Кнопка-иконка без aria-label недоступна для скринридеров – ярлык обязателен.
Штатная кнопка поиска в компоненте 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 или иконочный шрифт.
Смежные доработки поиска и вывода списков – в гайдах «Количество элементов в результатах поиска по новостям» и «Новый шаблон постраничной навигации». Другие приёмы правки шаблонов и меню – «Добавить вручную подпункт в подменю» и «Отключить переходы по пунктам меню на мобильных».
Частые вопросы
Как заменить текст кнопки поиска в Битрикс на иконку?
Скопируйте шаблон компонента search.form в свой шаблон и в template.php замените на с inline-SVG иконкой внутри и атрибутом aria-label="Найти".
Почему иконочный шрифт не работает на input type=submit?
Input – заменяемый элемент, у него не работают псевдоэлементы ::before/::after, через которые подставляют символ иконки. Поэтому кнопку делают тегом , на который псевдоэлемент вешается нормально.
Как называется иконка лупы в Font Awesome 6?
fa-magnifying-glass, семейство шрифта – 'Font Awesome 6 Free' с font-weight: 900 для solid-начертания. Юникод остался прежним – f002 (в Font Awesome 4/5 иконка называлась fa-search).
Почему нельзя просто вписать символ иконки в языковой файл?
Языковой файл отвечает за перевод, а не за оформление. Юникод-символ в нём ломает доступность и локализацию. Текст «Найти» оставьте в lang-файле как aria-label, а иконку добавляйте в шаблоне или CSS.
Иконка не отображается – что проверить?
При inline-SVG проверьте разметку и viewBox. При иконочном шрифте – что Font Awesome подключён, верно указано имя семейства и font-weight: 900. После правки шаблона сбросьте кэш компонента и браузера.
Материалы по теме
Что почитать дальше по этой теме