有没有办法动态改变图标的颜色？

我有一个星形图标。我想以未知数量的颜色使用此图标。有没有办法动态改变图标的颜色？

有时我需要一颗红色的星星，有时候是一颗紫色的星星。

我可以使用Web服务动态地在服务器上创建图像。

什么我很好奇，有没有什么办法来控制这个图标的颜色，而不用为我可能需要的每种颜色明确地创建一个图像？

来源

2013-04-05 BentOnCoding

也许你可以做一个带有透明度的图标，并改变背景的颜色。 – FishBasketGordo 2013-04-05 17:05:04

使用画布对象或透明图像并更改背景颜色。 – 2013-04-05 17:05:12

您应该使用glyphicons或一些其他类型的基于图标的字体：http://twitter.github.com/bootstrap/base-css.html#icons

这里的行动基于图标的字体的例子：你想要的任何http://css-tricks.com/examples/IconFont/

来源

2013-04-05 17:04:55 chrislondon

为什么有人会低估这一点？我认为这是最好的解决方案...（假设图标具有备用方法，我使用的网站是这样） – 2013-04-05 17:06:07

我不明白为什么建议使用glyphicons。它们是精灵，意思是说，你需要为每一种颜色选择一个新的颜色，而且不能动态地完成，而且无论如何只能以某种颜色出现 - 所有OP要求的都不是。而glyphicons不是一个基于图标的字体 - 它们是精灵。此外，基于图标的字体很酷，但似乎只有一组您可以使用的特定图标。如果有需要的自定义图标怎么办？ – Ian 2013-04-05 17:16:19

那么创建你自己的图标字体？看起来对我来说很简单：http://www.intridea.com/blog/2012/4/24/symbol-font。只要图标是单色，这是获得OP所需的最简单的方法。 – cimmanon 2013-04-05 17:22:31

SVG的图标，你可以做:)

下面是与拉斐尔JS库的例子： http://raphaeljs.com/icons/

来源

2013-04-05 17:06:06

为什么这会降低投票率？ – Michael 2013-04-05 17:09:07

链接已损坏。（只是评论不是迈克尔问题的答案） – chrmcpn 2017-08-15 15:57:18

答案或chrislondon更好 – 2017-08-16 17:29:06

我能想到的三种方式来做到这一点。

用你需要的所有不同颜色创建一个精灵表，并且移位偏移来改变颜色。这有点作弊。
动态生成使用Canvas图像（啊！）
使用SVG，这将通过更改DIV/SPAN

来源

2013-04-05 17:06:43 PaulProgrammer

的类类似于更改文本显示更改CSS回应

您可以生成只有4星级的图像：1黑色，1红色，1蓝色和1绿色（如果您有非白色背景，也可能是1白色）。然后堆叠所有这些，并与他们的不透明度，以获得你想要的颜色。

来源

2013-04-05 17:09:58 Uby

有没有办法动态改变图标的​​颜色？

回答

相关问题

有没有办法动态改变图标的颜色？