在 input 上添加图标字体时无法添加的问题

效果：一个搜索框。如图：

实施过程：一开始，将搜索框分为2部分，用2个 input ，一个 search ，一个 button ，然后给 type="button" 的input 添加放大镜的图标字体 。然而在添加图标字体到 input 上时，发现怎样都无法显示出来。如下图：

秉着“事出反常，必有妖”的心态，悄咪咪的将 input 换成了 button 元素，于是就成了。稍微有点懵 （o´・ェ・｀o） 

 至此，问题解决了。皆大欢喜！     []~(￣▽￣)~*   

虽然简单，但也贴上代码。哈哈 ~~~ 

html:

<button type="button" class="search-btn"></button>

css:

.search-box .search-btn{
    float: left;
    width: 50px;
    height: 40px;
    background: #00a4ff;
    font-family: "icomoon";
    font-size: 20px;
    color: #fff;
    border: 0;
}

.search-box .search-btn::before{
    content:"\e987";
}

注：上面所使用的 icomoon 字体为 icomoon 网站下载，可自行下载使用，IcoMoon App - Icon Font, SVG, PDF & PNG Generator

欢迎知道原理的小哥哥、小姐姐们在评论区告知。  O(∩_∩)O