html - 使用 :after 的输入按钮内的 FontAwesome 图标

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

我想你忘了 Font Awesome 文件

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/