如何在按钮中更改图标的颜色？
在按钮中更改图标的颜色可以通过以下几种方式实现：
- 使用CSS样式：通过设置按钮的伪类选择器，可以为按钮中的图标添加颜色样式。例如，假设按钮的HTML结构如下：
<button class="icon-button">
<i class="icon"></i>
</button>可以通过CSS样式为图标添加颜色：
.icon-button .icon {
color: red;
}这样就可以将图标的颜色设置为红色。你可以根据需要修改颜色值。
- 使用SVG图标：如果按钮中的图标是使用SVG格式的矢量图标，你可以直接修改SVG代码中的颜色属性。例如，假设按钮的HTML结构如下：
<button class="icon-button">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</button>可以通过修改SVG代码中的fill属性来改变图标的颜色：
<button class="icon-button">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</button>这样就可以将图标的颜色设置为红色。
- 使用字体图标：如果按钮中的图标是使用字体图标库（如Font Awesome）提供的图标，你可以通过修改CSS样式中的颜色属性来改变图标的颜色。具体的做法是为按钮添加相应的字体图标类，并设置颜色样式。例如，假设按钮的HTML结构如下：
<button class="icon-button">
<i class="fas fa-heart"></i>
</button>可以通过CSS样式为图标添加颜色：
.icon-button .fa-heart {
color: red;
}这样就可以将图标的颜色设置为红色。
以上是三种常见的在按钮中更改图标颜色的方法。具体选择哪种方法取决于你使用的图标类型和具体的需求。
相关·内容
3回答
更改按钮颜色时图标的颜色
、、、、
我有一个带图标的按钮。我想让按钮变成灰色，所以我更改了chromeColor，但当我这样做时，图标变得更暗了。在不改变颜色的情况下，左边的按钮是灰色的，右边是带有深色图标的灰色按钮。如何才能在不更改图标颜色的情况下拥有灰色按钮？
浏览 1提问于2011-09-16得票数 1
如何在IconButton中更改图标的颜色？在主题中图标的颜色(使用主题设计器)是黑色的，但有时我需要显示一个白色的图标按钮。下面的代码似乎没有将图标的颜色更改为白色 const iconStyle = { color: theme.palette.white};
return
浏览 21提问于2019-06-21得票数 2
回答已采纳
我正在用JavaFX和场景生成器在我的应用程序中做一些功能我让JFOenix颜色选择器看起来像一个图标。问题2:当我点击我的图标与颜色选择波纹效果工作，但我不需要任何波纹效果或动画时，我点击颜色选择器
问题3: JFoenix颜色选择器也将选定的颜色应用到自己的背景中，当我再次移动鼠标时，它的外观又变成了图标图像问题4:
浏览 2提问于2018-12-16得票数 3
回答已采纳
我已经查看了文档，并尝试像这样更改垫子图标的颜色：上面是元素在html中的外观。我尝试通过添加一个白色的类来更改图标的<e
浏览 7提问于2018-04-13得票数 18
如何在javaFX中更改颜色选择器的图标大小。我有一个问题，我不能增加图标大小的颜色选择器在JavaFX，谁知道如何改变按钮图标的大小？
浏览 9提问于2017-08-30得票数 0
我已经使用Achartengine创建了饼图。在这里，我无法更改图例文本的颜色，文本以图例图标的颜色显示。
我们可以更改标签文本颜色，但不能更改图例文本颜色。任何人都可以帮助解决这个问题。提前谢谢。
浏览 0提问于2013-11-28得票数 0
我正在使用https://plotly.com/python/ternary-contour/中描述的create_ternary_contour()方法在Plotly中创建三元图。我想改变色标的限制。当我尝试以这种方式更改cmin和cmax参数时， fig.update_layout(coloraxis={"cmin": -10, "cmax": 10}) 所得到的图形没有变化。有人知道如
浏览 59提问于2021-01-03得票数 2
我想用不同的颜色设置按钮文本和fa图标的样式。当我将鼠标悬停在按钮上时，两者都应该能够改变颜色。我可以做它们中的任何一个，但不能让它们同时工作： 我可以使用不同的样式： .fa.fa-plus {}
color: WHITE color: BLACK;
} 如果按钮</e
浏览 65提问于2019-12-27得票数 0
回答已采纳
我想在android studio中更改下半部分的颜色，我不是在讨论底部导航视图，我指的是默认情况下的三个图标，在打开任何应用程序时，图标都是返回按钮和主页，以及一个正方形，如何更改该图标的颜色？图像是突出显示我想要更改的
浏览 3提问于2020-01-10得票数 2
回答已采纳
更改传奇图标的颜色。sales.sales,我为我的线条图指定的颜色是但我的传奇图标颜色显示默认的SfCartesianChart颜色。根据我的线条图，线条颜色是不会改变的。
我正在使用的库是同步
浏览 3提问于2020-10-19得票数 0
2回答
我知道可以通过单击clustergram图形用户界面中的彩色条图标来插入一个彩色条。有办法以编程的方式完成吗？如何在clustergram图形中以正确的位置创建一个彩色条，就像单击了按钮一样？
浏览 2提问于2013-12-18得票数 3
回答已采纳
1回答
actionPerformed(ActionEvent a) { }
颜色更改成功，但是我需要根据单击的按钮在int数组中更改一个值。如何获得在JButton数组中单击鼠标的位置的X和Y坐标？
浏览 4提问于2014-06-24得票数 0
回答已采纳
4回答
我有一个上面有图标的JButton。我希望JButton的背景颜色与图标相同。下面的代码在标准的外观中运行良好：但是，当我将外观更改为Nimbus时，JButton的背景颜色要浅得多。当我在button.setBackground()中更改颜色时，JButton仍然会更改其背景颜色，但是我
浏览 1提问于2013-02-19得票数 1
回答已采纳
1回答
在芯片文件上我读到：应用适当的(点击)支持，并添加样式与材料设计“取消”图标使用在。您可以使用自定义图标，但您可能需要覆盖垫芯片删除定位样式，以正确居中的图标在芯片内。
但我该怎么做呢？我改变了图标，但现在我看到一个不同的颜色，然后芯片，当我去悬停在x按钮。我需要更改html组件中mat-chip中包含的按钮的默认样式，我可以这样做吗？
浏览 5提问于2022-09-22得票数 0
我想更改按钮图标的字体颜色。sass做了下面的尝试： .trix-button color: $white
我只在工具栏中找到了关于如何添加新按钮的不同提示。
浏览 3提问于2021-11-23得票数 1
回答已采纳
如何在自定义按钮上更改图标的颜色？我将资源添加到drawables，在添加app:icon="@drawable/google"之后，我的图标变成了紫色。如果我添加app:iconTint=""，图标将获得真实颜色(我正在尝试重新创建谷歌图标)。但是这种方式当然不适用，所以我想知道如何让我的按钮图标看起来像是在drawables中一样？
浏览 28提问于2021-07-07得票数 0
1回答
我正在尝试创建2个热图与变量值在R。我希望颜色和值被缩放，以便两个热图的值将是可比较的。现在我使用的是gplot包中的heatmap.2。我有两个这样的矩阵，它们的数值范围略有不同，我想为这两个矩阵创建高质量的热图(不一定要使用示例包)。
浏览 1提问于2013-05-21得票数 3
回答已采纳
1回答
我在游戏中创建了一个按钮，按钮的宽度为50，高度为30，位置为(150,50)，颜色为橙色，当用户将光标悬停在按钮上时，我希望将其颜色更改为浅橙色，以显示它是可点击的。我刚刚找到了一种方法，使用矩形变量上的碰撞点方法来检测光标的位置，但我仍然不知道如何改变颜色。有人能给我一段代码来做这件事吗？
浏览 0提问于2018-03-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
