Fontawesome里面的提交按钮

问题描述：

I have this line of code:

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

How can I add a font awesome icon before the "Search Products" text?

I tried using :before in the input field but it does not work.

Hope you can help

我有这行代码： p>

 ＆lt; input  type =“submit”class =“submit”name =“submit”id =“searchsubmit”value =“＆lt;？php esc_attr_e（'Search Products'，'paralinx'）;？＆gt;”  /＆gt; 
  code>  pre> 
 
 如何在“搜索产品”文本之前添加字体真棒图标？ p> 
 
 
我尝试过使用 ：在输入字段之前但它不起作用。 p> 
 
 
希望你能提供帮助 p> 
  div>

答

:before and :after are only available on elements that can have content in between an opening and a closing tag. <input type=submit> cannot have content.

Use

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

instead, it does allow the usage of :before.

答

You should use :before pseudo-element with 'content' property:

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

答

Use button tag

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

Fontawesome里面的提交按钮

相关推荐