Fontawesome內部提交按鈕

Question

我有這行代碼：

<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search Products', 'paralinx' ); ?>" />

如何在“搜索產品”文本之前添加超棒的字體圖標？

我嘗試在輸入字段中使用：before，但是它不起作用。

希望你能幫忙

Answer 1

:before和:after僅適用於在開始和結束標記之間具有content元素。 <input type=submit>不能包含內容。

采用

<button type="submit" class="submit" name="submit" id="searchsubmit"><?php esc_attr_e( 'Search Products', 'paralinx' ); ?></button> 

相反，它確實允許使用:before 。

Answer 2

您應該在偽元素之前使用：content屬性：

.submit:before {
 content: "";
 display: block;
 background: url("icon.jpg") no-repeat;
 width: 20px;
 height: 20px;
 float: left;
 margin: 0 6px 0 0;
}

Answer 3

使用按鈕標簽

<button type="submit" class="submit" name="submit" id="searchsubmit" ><i class="fa fa-check"></i> <?php esc_attr_e( 'Search Products', 'paralinx' ); ?></button>