Как добавить значок "Потрясающий шрифт" в контактную форму 7. Кнопка "Отправить"

Простая кнопка “Submit” в контактной форме выглядит как общая. Добавление потрясающий значок шрифта внутри кнопки отправки контактной формы 7 дает ему визуальный сигнал, который привлекает внимание и делает действие более ясным. подумайте о значке бумажной плоскости рядом с “Send Message” или значке конверта рядом с “Submit.”

Загвоздка? в контактной форме 7 нет встроенной опции добавления значков к кнопкам. вам нужно вставить шестигранный код Unicode значка непосредственно в тег формы CF7 и соединить его с небольшим фрагментом CSS, чтобы загрузить правильный шрифт.

Это руководство шаг за шагом проведет вас через весь процесс. Вы узнаете, как добавить а значок "Шрифт потрясающий" на кнопке отправки CF7, добавить значки внутри заполнителей полей формы, и обработать настройку семейства шрифтов Font Awesome как для пользователей Elementor, так и для настроек не-Elementor.Обновлено для Font Awesome 5, 6, и последних версий Elementor 2026 года.

Что понадобится

Прежде чем приступить к работе, убедитесь, что они у вас есть на месте:

• WordPress с Контактная форма 7 установлен и активирован
• Шрифт Потрясающий загружается на ваш сайт (через Elementor, плагин или ручной CDN)
• Доступ к вашей теме Пользовательские CSS панель (Внешний вид > Настройка > Дополнительный CSS)
• Шестигранный код Unicode для нужной иконки (где это найти, покажем)

Требуемое время: 5-10 минут

Уровень квалификации: Начинающий (опыт кодирования не требуется, просто скопируйте и вставьте)

Шаг 1. Включите "Потрясающий шрифт" на своем сайте

Вашему сайту нужен шрифт Awesome загруженный, прежде чем любые значки будут рендеринг. как вы это сделаете, зависит от вашей настройки:

Если вы используете Элементор (самый простой метод)

Элементор поставляется со встроенным шрифтом Awesome. Вам просто нужно убедиться, что включена обратная совместимость со шрифтом Awesome 4, если вы используете старые коды значков.

1. Перейти к Элементор > Настройки > Дополнительно вкладка на панели управления WordPress
2. Найти “Load Font Awesome 4 Поддержка” и установить его “Yes”
3. Нажмите Сохранить изменения

Обновление 2026 года: Теперь Elementor загружает шрифт Awesome 6 по умолчанию в последних версиях.Toggle “Load Font Awesome 4 Support” обеспечивает обратную совместимость со старыми кодами значков. если вы используете коды значков FA6 (например, из Поиск значков Font Awesome 6), вам не нужно ничего менять, так как Elementor обрабатывает его автоматически.

Если вы тоже пользуетесь Мастер-аддоны для Elementorвы получаете доступ к 8 премиальных библиотек значков beyond Font Awesome, предоставляющий вам тысячи дополнительных значков прямо внутри редактора Elementor.

Если вы не используете Элементор

Установите официальное лицо Плагин Font Awesome с сайта WordPress.org. После активации:

1. Перейти к Настройки > Шрифт Потрясающий
2. Выберите свою версию (шрифт Awesome 5 бесплатно или 6 бесплатно)
3. Выберите метод доставки (CDN для v5 или Kit для v6)
4. Сохранить и вы готовы использовать значки на своем сайте

Важно: Шрифт Awesome 6 недоступен через устаревший CDN. Если вам нужны значки FA6, вам нужно будет настроить бесплатный комплект по адресу fontawesome.com или воспользуйтесь интеграцией набора плагина WordPress.

Шаг 2: Найдите шестигранный код значка Unicode

Каждый значок Font Awesome имеет уникальный шестигранный код Unicode.Это код, который вы вставите в кнопку отправки контактной формы 7.

Вот как его найти:

1. Иди в Страница поиска значков "Шрифт потрясающий"
2. Ищите желаемый значок (например, “paper plane”, “envelope”, “arrow right”)
3. Нажмите на значок, чтобы открыть его подробную страницу
4. Ищите Юникод значение. Это 4-5-значный шестигранный код типа f1d8 (бумажная плоскость) или f0e0 (конверт)

Вот несколько популярных значков для кнопок отправки и их кодов Unicode:

Шаг 3. Добавьте значок "Удивительный шрифт" в контактную форму 7. Кнопка "Отправить"

Теперь для главного события. вы вставите шестнадцатеричный код значка Unicode прямо в тег формы CF7. Вот точный процесс:

Откройте свою контактную форму

Перейти к Контакты > Контактные формы в вашей панели управления WordPress. нажмите на форму, которую хотите редактировать (или создать новую).

Найдите тег кнопки "Отправить"

В редакторе форм ищите тег кнопки отправки Обычно это выглядит так

[submit "Submit"]

Вставьте шестигранный код Юникода

Замените тег отправки кодом значка, помещенным рядом с текстом кнопки. Используйте формат сущности HTML &#x + гексокод + ;

Например, чтобы добавить значок бумажной плоскости после текста “Send Message”:

[submit "Send Message "]

Или поставить значок перед текстом:

[submit " Send Message"]

Вот полный пример контактной формы со значком в кнопке отправки:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

Шаг 4: Добавьте CSS для шрифта значка

Значок не будет отображаться правильно, пока вы не сообщите браузеру, какой шрифт использовать для кнопки submit.без этого CSS вы увидите небольшой квадратик или вопросительный знак вместо значка.

Перейти к Внешний вид > Настроить > Дополнительный CSS и вставить один из следующих фрагментов:

Для Font Awesome 5 (элементор по умолчанию)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

Для шрифта Awesome 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

The font-weight: 900 требуется для иконок Solid (самый распространенный стиль).Если вы используете значки Regular, измените его на font-weight: 400. Для значков бренда (например, логотипа Twitter или GitHub) используйте font-family: "Font Awesome 6 Brands" с font-weight: 400.

Совет профессионала: Если значок отображается на рабочем столе, но не на мобильном телефоне, добавьте -webkit-font-smoothing: antialiased; и text-rendering: auto; к правилу CSS. Это исправляет отображение несоответствий в браузерах.

Сохраните свой CSS и предварительно просмотрите форму. теперь вы должны увидеть значок, отображаемый внутри кнопки отправки рядом с текстом.

Бонус: добавьте потрясающие значки шрифта в поля заполнителей CF7

Хотите значки внутри заполнителей полей формы тоже? вы можете добавить значок конверта в поле электронной почты, значок пользователя в поле имени и значок карандаша в поле сообщения. Он использует тот же подход Юникода.

Вот код CF7 с иконками в заполнителях:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

Теперь добавьте CSS, чтобы применить шрифт Font Awesome к вашим заполнителям:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

Примечание к шрифтам-заполнителям: Настройка font-family на заполнителях влияет на весь текст заполнителя, а не только на значок. если остальная часть текста заполнителя выглядит иначе, чем ожидалось, добавьте шрифт тела вашей темы в качестве запасного варианта: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

Метод без кода: стиль CF7 с главными дополнениями для Elementor

Если лучше пропустить CSS целиком, Мастер-аддоны для Elementor включает выделенный Контактная форма 7 виджет, позволяющий настроить внешний вид формы визуально, не написав ни строчки кода.

Вот что можно сделать с Виджет контактной формы МА 7:

• Стиль кнопки отправки с индивидуальными цветами, градиентами, эффектами зависания, рамками и набивкой
• Настройте поля ввода с цветами фона, радиусом границы и типографикой
• Примените предустановки готового стиля чтобы получить полированную форму в один клик
• Интервал управления и компоновка для каждого элемента формы с панели Элементор
• Используйте любой значок из 8 премиальных библиотек значков в комплекте с главными аддонами

Это самый быстрый подход, если вы хотите, чтобы ваша контактная форма соответствовала дизайну вашего сайта, не копаясь в селекторах CSS. Просто перетащите виджет внутрь, выберите форму и стилизируйте все из визуального редактора.

Устранение общих проблем

Значок отображается в виде квадратного поля или вопросительного знака

Это означает, что шрифт Awesome не загружается для кнопки отправки. Перепроверьте это:

• Шрифт Awesome активируется на вашем сайте (настройка Элементор или плагин FA)
• Ваш CSS включает в себя правильное font-family и font-weight
• Используете правильную версию (фамилии шрифтов FA5 и FA6 разные)

Значок появляется, но обычный текст выглядит странно

Когда ты установишь font-family чтобы шрифт Потрясающий для всей кнопки, весь текст в кнопке использует этот шрифт Добавить резервный шрифт: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

Значок работает на рабочем столе, но не на мобильном телефоне

Добавьте эти свойства в свое правило CSS:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

Я хочу использовать вместо этого: перед псевдоэлементом

Кнопка отправки CF7 - это <input type="submit"> элемент. элементы ввода не поддерживают ::before или ::after псевдоэлементы, потому что у них не может быть дочерних узлов. Вот почему мы используем шестигранный подход Юникода непосредственно в тексте кнопки. Если вам нужна поддержка псевдоэлементов, вам нужно будет преобразовать кнопку отправки в <button> отметьте с помощью крючка фильтра CF7, для которого требуется индивидуальный PHP.

Часто задаваемые вопросы

Завершение

Добавление а значок "Шрифт потрясающий" на кнопке отправки контактной формы 7 является небольшим изменением, которое делает заметное различие. метод гексокода Unicode работает в Font Awesome 5 и 6, требует всего два шага (редактировать тег формы + добавить CSS), и на настройку уходит менее 5 минут.

Для подхода заполнителя применяется та же логика: вставьте шестнадцатеричный код в атрибут заполнителя и определите семейство шрифтов в своем CSS. Оба метода придают вашим формам более отточенный профессиональный вид.

Если вы хотите полностью пропустить CSS, Виджет Master Addons CF7 ручки визуально формируют стиль внутри Elementor. в любом случае, ваши формы будут выглядеть лучше, чем выходные данные CF7 по умолчанию.

Связанное чтение: Руководство по значкам и шрифтам Elementor | Как создать анимированные кнопки в Elementor | Стиль CF7 с главными аддонами