On the input can not be added when adding an icon font problems

Effect: a search box. Figure:

 

Implementation : the beginning, the search box is divided into two parts, with two input, a search, a button, and then to type = "button" to add the input magnifying glass icon fonts. However, when you add an icon font to the input, we find out what can not be displayed. As shown below:

 

Holds "unusual things out, there must be a demon" mentality, quiet Mimi replaced the input button elements, so he became. A little bit ignorant (o'· S Factory · `o) 

 

 

 So far, the problem has been solved. Happy! [] ~ (¯ ▽ ¯) ~ *   

 

Although simple, but also paste the code. Ha ha ~ ~ ~ 

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