[英]FontAwesome Icon Inside Input button using :after
I am trying to have a calendar icon to show on a submit button. 我正在尝试在提交按钮上显示日历图标。 Note: i cannot insert a tag or anything similar- I simply want to format the button from css.
注意:我无法插入标签或其他类似内容-我只想从CSS格式化按钮。 So far nothing shows.
到目前为止,没有任何显示。
the HTML code is: HTML代码是:
<p class="mphb_sc_search-submit-button-wrapper">
<input type="submit" class="button" value="Search">
</p>
The css code is: 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;
}
` UPDATE: I have to change the color to white so it now shows. `更新:我必须将颜色更改为白色,以便现在可以显示。
I was looking for something like this: 我一直在寻找这样的东西:
I think you forgot the font awesome file 我认为您忘记了字体很棒的文件
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/ https://jsfiddle.net/9jngfrm5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.