使用IcoMoon添加输入类型提交的图标

Question

我试图通过使用<input type="submit">向IcoMoon添加搜索图标。我不能把<i>包括在<input>里面。

我尝试了以下使用伪:before的方法，但不起作用。

HTML:

<div class="top-search">
    <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
        <input type="submit" class="icon-search" value="e90e">
    </form>
</div>

CSS:

@font-face {
    font-family: 'icomoon';
    src: url('icomoon.eot?lkqd5y');
    src: url('icomoon.eot?lkqd5y#iefix') format('embedded-opentype'),
         url('icomoon.ttf?lkqd5y') format('truetype'),
         url('icomoon.woff?lkqd5y') format('woff'),
         url('icomoon.svg?lkqd5y#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
    content: "\e90e";
}

Answer 1

最后，我找到了解决上述问题的方法。

<input type="submit" class="icon-search" value="&#xe90e">

Answer 2

<input>元素不允许有伪内容。您可以使用<button type="submit">代替。这样您就可以直接使用:before或向其中添加<i>标记。