我想使用字体字符(例如来自font-awesome)作为输入元素的背景图像。
<style>
#id {
background-image: content('\f2d3'); /* content instead of url() */
background-position: right center;
}
</style>
<input id="test" />
我的猜测是我要么将角色保存为图像,要么使用伪元素:之后内容以及足够的定位来实现这一点。只是想看看是否有更好的解决方案。就像可以访问SVG中的字符并使用内联SVG作为内容一样?
我使用SVG制作了部分解决方案(请参阅https://fiddle.jshell.net/92h52e65/4/),但仍然存在使用正确字体的问题。
<style>
#input1 {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30px" height="20px"><text x="5" y="15" font-family="FontAwesome">x</text></svg>');
background-position: right center;
background-repeat: no-repeat no-repeat;
}
</style>
<input id="input1" placeholder="insert some text here" size="30" required />
为了在IE和FF中工作,我不得不使用base64编码而不是utf8。我把utf8放在这里使它更具可读性。
答案 0 :(得分:0)
是否有特殊原因需要使用background-image
?
如果没有,你可以这样做:
.input1wrap::after {
font-family: FontAwesome;
content: '\f2d3';
margin-left: -1.5em;
}
&#13;
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="input1wrap">
<input id="input1" placeholder="insert some text here" size="30" required />
</span>
&#13;