在表单字段前添加图标答案

【问题标题】：Add icon before form field在表单字段前添加图标
【发布时间】：2022-06-15 15:49:38
【问题描述】：

如何在表单字段前添加图标？

这是现在的样子： here

这里是我想要的： here

.................................................. …………………………………………………………………………………………………………………………………………………………………… ..................................................... . 这是css代码（front.css）： ..................................................... ……………………………………………………………………………………………………………………………………………… .................................................

body .qb-form {
    width: auto;
    height: auto;
}
@media (max-width: 660px) {
    body .qb-form {
        width: 100%;
    }
}
body .qb-form h2 {
    background: #3482C3;
    padding: 15px 25px;
    margin-bottom: 0;
    color: white;
    margin-top: 0;
}
body .qb-form .moreinfo {
    background: #3482C3;
    color: white;
    padding: 0 25px 15px 25px;
    margin-bottom: 15px;
}
body .qb-form label {
    text-align: left;
    font-size: 14px;
    display: block;
    padding-bottom: 0;
}
body .qb-form .qb-gdpr-label {
    padding-bottom: 0;
}
body .qb-form .quickbuy_input {
    height: 31px;
    width: 190px;
    border: 1px solid #ABADB3;
    padding: 5px;
}
body .qb-form textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #abadb3;
}
body .qb-form .crow {
    padding: 0 25px 25px 25px;
}


body .qb-form .buttons_wrp {
    padding: 10px 25px 25px 25px;
}
body .qb-form .buttons_wrp .button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    color: white;
    background: #3482C3;
    overflow: hidden;
}
body .qb-form .buttons_wrp .qb-btn-submit {
    padding: 10px 20px 10px 62px;
    background: #3482C3 url('../img/cart-icon.png') no-repeat 15px center;
}
body .qb-form .buttons_wrp .button:hover {
    background-color: #388bd1;
}
body .qb-wrp .qb-btn span {
    border-bottom: 1px dashed;
}
.product-simple .qb-btn {
    background: none;
    color: #1F679B;
    font-size: 13px;
    border-bottom: 1px dashed #1F679B;
    padding: 0 0 1px 0;
}
body .qb-form sup {
    color: red;
    font-weight: bold;
}
body .qb-form .quickbuy_errors, body .qb-form .quickbuy_success {
    margin: 0 15px;
    display: none;
    padding: 10px;
    line-height: 1.5;
}
body .qb-form .qb-product-name {
    padding: 5px;
    border: 1px dashed white;
    font-weight: bold;
    display: inline-block;
}
body .qb-form body .qb-form_loader {
    position: relative;
    top: -3px;
}
body .qb-form .qb-loader {
    visibility: hidden;
}
body .qb-form .qb-loader.visible {
    visibility: visible;
}
.qb-form .qb-gdpr-label .qb_gdpr_wrp {
    float: left;
    position: relative;
    top: 3px;
    margin-right: 10px;
}
.qb-form .qb-btn-close {
    display: none;
}
.qb-form .qb-btn-close span {
    font-size: 2rem;
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    position: relative;
    top: -1px;
    border: none;
}
.qb-gdpr-label p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .qb-wrap,
    #product .qb-wrap {
        flex-wrap: wrap;
    }
}

.................................................. …………………………………………………………………………………………………………………………………………………………………… ..................................................... . 这是 hook.tpl： ..................................................... ……………………………………………………………………………………………………………………………………………… .................................................

            <div class="crow">
            <label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
            <input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}"/>
        </div>
            <div class="crow">
            <label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
            <input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}"/>
        </div>
        <div class="crow">
            <label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
            <input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}"/>
        </div>
        
        {if $qb_gdpr}
            <div class="crow">
                <label class="qb-gdpr-label">
                    <span class="qb_gdpr_wrp">
                        <input type="checkbox" class="qb_gdpr" name="qb_gdpr">
                    </span>
                    {if $qb_gdpr_text}
                        {$qb_gdpr_text nofilter}{* HTML *}
                    {else}
                        {l s='I agree to processing of my personal data' mod='quickbuy'}
                        {if $qb_gdpr_link}(<a target="_blank" href="{$qb_gdpr_link|escape:'html':'UTF-8'}">{l s='read' mod='quickbuy'}</a>){/if}
                    {/if}
                </label>
            </div>
        {/if}
        <div class="crow quickbuy_errors error"></div>
        <div class="crow quickbuy_success success"></div>
        <div class="buttons_wrp">
            <input type="hidden" name="qb_id_product" value="{$qb_product->id|intval}" />
            <input type="hidden" name="qb_id_product_attribute" value="{$qb_product->id_product_attribute|intval}" />
            <input type="hidden" name="qb_token" value="{$qb_token|escape:'html':'UTF-8'}" />
            <input type="hidden" name="qb_action" value="submitQB" />
            <input type="submit" class="qb-btn-submit btn btn-default button button-small" value="{l s='Buy' mod='quickbuy'}"/>
            <button class="qb-btn-close btn btn-default button button-small"><span>&times;</span> {l s='Close' mod='quickbuy'}</button>
            <img class="qb-loader" src="/img/loader.gif" alt="{l s='Loading...' mod='quickbuy'}" />
        </div>
    </div>
</div>

如果有人能提供帮助，我会很高兴。先感谢您。此致 ..................................................... ……………………………………………………………………………………………………………………………………………… .................................................

【问题讨论】：

你到底卡在哪一部分？这个问题有点宽泛

标签： javascript css prestashop