更改字形圖標的顏色
[英]Change color of glyph icon
問題描述
標准字形圖標非常無聊
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
以下代碼有效， 但不是用黑色填充星形，有沒有辦法將其設置為其他顏色，例如橙色？
此外，還有一組更有趣的圖標可供下載以用於按鈕嗎？
const glyphStarEmpty = 'glyphicon glyphicon-star-empty';
const glyphStarFull = 'glyphicon glyphicon-star';
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
currentGlyph: glyphStarEmpty
};
this.toggleChecked = this.toggleChecked.bind(this);
}
toggleChecked() {
if(this.state.currentGlyph == glyphStarEmpty){
this.setState({
currentGlyph : glyphStarFull
})
}
else{
this.setState({
currentGlyph : glyphStarEmpty
})
}
this.setState({
checked: !this.state.checked
});
}
render() {
return (
<button className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
);
}
}
6 個解決方案
解決方案1
0 2017-03-05 15:53:27
您可以使用內聯樣式：
<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
如果您還需要黑色輪廓，請嘗試以下操作：
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
解決方案2
0 2017-03-05 15:54:10
您可以使用簡單的CSS做到這一點
<span class="icon-some"></span>
.icon-some {
color: orange;
}
解決方案3
0 2017-03-05 15:54:40
哇，為什么這么復雜？ 只需在<head>標記內添加一些CSS：
<style type="text/css">
.glyphicon { color: orange; }
</style>
解決方案4
0 2017-03-05 15:57:14
您可以像這樣添加css color屬性：
HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS
.orange {color: orange;}
解決方案5
0 2017-03-05 16:07:02
您可以使用的另一個圖標來自字體真棒 。它們有大量的按鈕圖標，我敢肯定您會喜歡的，我已經在很多網站上使用了此圖標，以便更改顏色，就像在其他CSS上一樣成員在我之前告訴過你
解決方案6
0 2017-03-05 16:42:08
在周圍答案的幫助下，解決方案變得顯而易見。 這不是完美的，因為我希望內部具有純白色的黑色邊框（或什至是向上/向下三角形使用灰色的stackoverflow配色方案）獲得未經檢查的狀態，以實現最大對比度，但是我將自行修復：
render() {
if(!this.state.checked)
{
return (
<button className={glyphStarFull} onClick={this.toggleChecked}></button>
);
}
else
{
return (
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
如何在div標簽內的懸停上更改字形圖標的顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.