CSS make background-image use font character

Question

I'd like to use a font character (e.g. from font-awesome) as a background-image of an input element.

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

<input id="test" />

My guess is that I'll either save the character as an image or use the pseudo-element :after with content and adequate positioning to achieve this. Just wanted to see if there are better solutions. Like would it be possible to access the character in SVG and use inline SVG as content?

Update:

I made a part solution with SVG (see https://jsfiddle.net/92h52e65/4/) but that still has the problem of using the correct font.

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

For this to work in IE and FF I had to use base64-encoding instead of utf8. I left the utf8 here to make it more readable.

Answer 1

Is there a particular reason you need to use background-image?

If not, you can do it this way:

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