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.

Eleonoraeleonore

Yes, but fill color and font-family are required. pastebin.ai/q13qjvfb5r ``` <svg xmlns="w3.org/2000/svg" version="1.1" width="30px" height="20px"><defs><style type="text/css">@import url('//fonts.googleapis.com/css?family=Lato|Open+Sans|Noto+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower');</style></defs> <text x="5" y="15" fill="cornflowerblue" style="direction: ltr; font-size: 18px; font-family:'Noto Sans';">x✖</text></svg> ``` – Sternson

1) How to specify font-family in SVG: #30025443 2) Or Google font src url in SVG: https://mcmap.net/q/1913833/-google-font-src-url-in-svg – Sternson

3) "Fill" is "color attribute" on svg text: #52022265 – Sternson

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>

Shamblin

this will work and is much easier. I was trying to see if there was a way to have both. I'd use the ::after to indicate the field type and wanted to have another way to display whether or not the field was correctly filled. And as I already use the FontAwesome library I thought to reuse their characters instead of making an image of a character and then transferring it again. – Eleonoraeleonore

If you need two items, you of course can use ::before and ::after. – Shamblin

A particular use case would be that you want to style a search input without an extra element. Input of type text don' accept :before and :after elements. For example with this character: ⚲ – Dercy

One reason to want a background-image is so that you could repeat it, perhaps in a line for example. – Geostrophic