是否可以着色fontawesome图标颜色? [英] Is it possible to color the fontawesome icon colors?
问题描述
我可以更改fontcolor,但不能更改fill。我首先尝试设置背景颜色,但填充整个图标框区域。
例如,我有
< i class = icon-star-empty icon-large>< / i>
但我想要它是黄色的。
编辑:
使用案例是,我想要一个收藏图标的灰色轮廓,点击,大纲变为橙色,填充到黄色。
Font-awesome带有一些概述和填充,它提供了一种方法来动态更改CSS属性,而不是让更改立即生效或与 javascript 。
I can change fontcolor, but not the "fill". I first tried setting background-color, but that fills the whole icon box area.
For example, I have
<i class="icon-star-empty icon-large"></i>
but I want it to be yellow.
Edit: The use case is that I want a "favorite" icon to be outline of grey, on click, the outline becomes orange, fill to yellow.
Font-awesome comes with a number of both outlined and filled icons. The star is one of them.
There are four different star icon classes that you can use:
class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"
If you're a glass-half-full type of person, you can also use the alias for 'icon-star-half-empty':
class="icon-star-half-full"
You can colour the font-awesome icons and use different effects to achieve what you're looking for:
<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>
Where the following CSS is used (rather than using inline styles):
.icon-a {
color: #888;
}
.icon-b {
color: orange;
}
.icon-c {
color: yellow;
}
.icon-d {
color: yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
You can also substitute/set the size too, if you don't want to use icon-large
.
The above code outputs the following:
but I've put the above code and a few more options in a JSFiddle, which you can look at here.
It's also possible to use css-transitions that provides a way to animate changes to CSS properties instead of having the changes take effect instantly and or in combination with javascript.
这篇关于是否可以着色fontawesome图标颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!