FontAwesome Icon Inside Input按钮使用：after

Question

我正在尝试在“提交”按钮上显示日历图标。 注意：我无法插入标签或其他类似内容-我只想从CSS格式化按钮。到目前为止，没有任何显示。

HTML代码是：

<p class="mphb_sc_search-submit-button-wrapper">
    <input type="submit" class="button" value="Search">
</p>

css代码是：

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative
}

.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}   

` 更新： 我必须将颜色更改为白色，以便现在可以显示。

我正在寻找这样的东西：

Answer 1

我认为您忘记了字体很棒的文件

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css 

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative;

}
.mphb_sc_search-submit-button-wrapper input{
  padding-right:30px;
}
.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    top:3px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

https://jsfiddle.net/9jngfrm5/