Html 如何在WordPress（使用CF7）的引导表单中包含图标？

我正在尝试基于Bootstrap4制作WordPress主题。一切都很顺利，但我的联系方式如下：



这是我的密码：

---

您可以在联系人表单7表单编辑器中使用html

在联系人表单7=>表单文本区域中替换此代码

<div class="input-group input-group-lg mb-3 mt-5">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-user"></i>
        </span>
    </div>
    [text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-envelope-open"></i>
        </span>
    </div>
    [email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-pencil-alt"></i>
        </span>
    </div>
    [textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
</div>

[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]

[文本*您的姓名类别：表单控制类别：mb-3类别：mt-5占位符“Imięi nazwisko”]
[电子邮件*您的电子邮件类别：表单控制类别：mb-3占位符“Adres e-mail”]
[textarea您的消息类：表单控件类：mb-3占位符“Wiadomość”]
[提交类别：btn类别：btn主要类别：btn区块类别：btn lg“Wyślij”]

请尝试使用我尝试过的插件。不幸的是，当我为此应用classess时，我失去了引导样式是的，通过这种方法，我可以在表单字段旁边显示图标，在一些css样式设置之后，甚至可以调整图标和字段的高度以使它们相等（这很好！），但我仍然有一个问题。。。这看起来非常像我只想在普通屏幕上，当我把它调整为更小的时候，图标移动到表单字段上方。。。我试图将

display:inline

插入到

输入组

，但没有任何变化。。。你知道问题是什么吗？检查响应性设计。我认为您的默认CSS覆盖了响应CSS样式。

[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]

<div class="input-group input-group-lg mb-3 mt-5">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-user"></i>
        </span>
    </div>
    [text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-envelope-open"></i>
        </span>
    </div>
    [email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-pencil-alt"></i>
        </span>
    </div>
    [textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
</div>

[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]