Is it possible to use a font character, like one from font-awesome, as a background-image for an input element?
<style>
#id {
background-image: content('\f2d3'); /* content instead of url() */
background-position: right center;
}
</style>
<input id="test" />
I'm considering saving the character as an image or using the pseudo-element :after with content and proper positioning. Are there any other solutions to achieve this effect? Could I access the character in SVG and use inline SVG as content?
Update:
I partially solved it using SVG (see https://jsfiddle.net/92h52e65/4/), but I still face the issue 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</text></svg>');
background-position: right center;
background-repeat: no-repeat no-repeat;
}
</style>
<input id="input1" placeholder="insert some text here" size="30" required />
To make this work in IE and FF, I had to use base64 encoding instead of utf8. I kept the utf8 version here for readability purposes.