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 인코딩을 사용해야했습니다. 나는 그것을 더 읽기 쉽게하기 위해 여기에 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>