CSSは背景画像にフォント文字を使用する

Question

入力要素の背景画像としてフォント文字（font-awesomeなど）を使用したいと考えています。これを達成するためにコンテンツ、適切なポジショニングで後：

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

<input id="test" /> 

私の推測では、私がイメージとして文字を保存したり、擬似要素を使用しますどちらかということです。より良い解決策があるかどうかを見たいだけでした。同様に、SVGの文字にアクセスし、インラインSVGをコンテンツとして使用することは可能でしょうか？

更新：

私は、SVGと一部のソリューションを作った（https://fiddle.jshell.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とFFで動作するには、utf8の代わりにbase64-encodingを使用する必要がありました。私はutf8をより読みやすくするためにここに残しました。

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