CSS使背景图像使用字体字符

Posted 2023-05-08

【中文标题】CSS使背景图像使用字体字符

【英文标题】：CSS make background-image use font character

【发布时间】：2017-03-18 11:03:13

【问题描述】：

我想使用字体字符（例如来自 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"  ><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 和 FF 中工作，我必须使用 base64 编码而不是 utf8。我将 utf8 留在这里以使其更具可读性。

【参考方案1】：

您是否有特殊原因需要使用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>

【讨论】：

这将起作用并且更容易。我试图看看是否有办法两者兼得。我会使用 ::after 来指示字段类型，并希望有另一种方式来显示该字段是否正确填写。因为我已经使用了 FontAwesome 库，所以我想重用他们的角色，而不是制作一个角色的图像然后再次传输它。

如果需要两个项目，当然可以使用::before和::after。

一个特定的用例是您希望在没有额外元素的情况下设置搜索输入的样式。文本类型的输入不接受 :before 和 :after 元素。例如这个字符：⚲

想要背景图像的一个原因是您可以重复它，例如可能在一行中。