我想使用字體字符（例如，來自font-awesome）作爲輸入元素的背景圖像。CSS使背景圖像使用字體字符

<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中工作，我不得不使用base64編碼而不是utf8。我在這裏離開了utf8，使它更具可讀性。

來源

2016-11-04 casenonsensitive

@Praveen：這個問題的內容使用jQuery來實現它。我問它使用CSS，不包括JavaScript或任何庫。 – casenonsensitive

重新打開......'：）' –

是否有你需要使用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>

來源

2016-11-08 12:53:14

這會工作，而且更容易。我試圖看看是否有辦法兼得。我會使用:: after來指示字段類型，並希望以另一種方式顯示字段是否被正確填充。因爲我已經使用了FontAwesome庫，所以我想重複使用它們的字符，而不是製作一個角色的圖像，然後再次傳輸它。 – casenonsensitive

如果你需要兩個項目，你當然可以使用':: before'和':: after'。 –

一個特殊的用例就是你想在沒有額外元素的情況下設置一個搜索輸入的樣式。輸入文字不接受：元素之前和之後：。例如對於這個字符：⚲ –

CSS使背景圖像使用字體字符

更新：

回答

相關問題