CSS如何使用字体字符作为背景图片？

Question

CSS如何使用字体字符作为背景图片？

csssvgbackground-imagebackground-positioncss-content

6

我想把一个字体字符（例如来自font-awesome）用作输入元素的背景图像。

<style>
#id {
    background-image: content('\f2d3'); /* content instead of url() */
    background-position: right center;
}
</style>

<input id="test" />

我猜我要么将该字符保存为图像，要么使用伪元素：after和适当的定位与content来实现此目的。只是想看看是否有更好的解决方案。比如说，能否访问SVG中的字符并使用内联SVG作为内容？

更新：我用SVG做了一部分解决方案（参见https://jsfiddle.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&#xf2d3;</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和Firefox中使用此功能，我不得不使用base64编码而不是utf8。我将utf8保留在这里以使其更易读。

- casenonsensitive

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

您需要使用 background-image 的特定原因吗？

如果没有，您可以这样做：

.input1wrap::after {
  font-family: FontAwesome;
  content: '\f2d3';
  margin-left: -1.5em;
}

<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>