Wordpress 搜索表单 - 用图标替换“搜索”文本答案

【问题标题】：Wordpress Search Form - Replace "Search" text with iconWordpress 搜索表单 - 用图标替换“搜索”文本
【发布时间】：2017-03-17 01:25:25
【问题描述】：

我正在尝试对 wordpress 默认搜索表单进行一些自定义，我想用图标替换 value="Search" 字符串中的文本“Search”。

目前我有以下表格：

<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
   <div class="container-1">
      <input type="text" value="" name="s" id="s" placeholder="Search..." />
      <input type="submit" id="searchsubmit" value="Search" />
   </div>
</div>
</form>

我怎样才能代替下面的图标？ <i class="fa fa-search"></i>

【问题讨论】：

我不相信您可以将 html 放入 value 属性中。您可以将其设置为使用 font-awesome font-face 并输入搜索图标的实体。或者你可以设置字体，然后使用content: css 属性来添加实体，
我只是将输入 type="submit" 替换为 button type="submit" 并完全删除了该值.. 除了一些样式问题之外，它似乎工作正常..

标签： wordpress

【解决方案1】：

这里有一个解决方法，我用button 替换了input，完全删除了value

<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
   <div class="container-1">
      <input type="text" value="" name="s" id="s" placeholder="Search..." />
      <button type="submit" id="searchsubmit" />
           <span class="icon"><i class="fa fa-search"></i></span>   
      </button>
   </div>
</div>
</form>

表单似乎工作得很好..

【讨论】：