<a>
由于某种原因,我必须将图标包装在标签中。
有什么可能的方法可以将超棒字体图标的颜色更改为黑色?
还是只要包裹在<a>
标签中就不可能吗?真棒字体应该是字体而不是图像,对不对?
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
<a>
由于某种原因,我必须将图标包装在标签中。
有什么可能的方法可以将超棒字体图标的颜色更改为黑色?
还是只要包裹在<a>
标签中就不可能吗?真棒字体应该是字体而不是图像,对不对?
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
对我而言,唯一有效的方法是内联CSS +覆盖
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
HTML:
<i class="icon-cog blackiconcolor">
css:
.blackiconcolor {color:black;}
使用类将为您提供免费的绑定属性,您可以将其应用于所需的任何标签。
如果要更改特定图标的颜色,可以使用如下所示的内容:
.fa-stop {
color:red;
}
在同一行中编写此代码,这将更改图标颜色:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
您可以使用属性通过更改前字体图标的前景色来更改其颜色。以下是示例:css
color
<i class="fa fa-cog" style="color:white">
这也支持svgs
<style>
.fa-cog{
color:white;
}
</style>
<style>
.parent svg, .parent i{
color:white
}
</style>
<div class="parent">
<i class="fa fa-cog" style="color:white">
</div>
随便随便给它样式
style="color: white;font-size: 20px;"
.fa-search{
color:#fff;
}
您在CSS中编写该代码,它将颜色更改为白色或您想要的任何颜色,请指定它
只要给和文本样式就可以了:D HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
要仅击中此类按钮中的齿轮图标,可以给按钮一个类,并仅在按钮内部时设置图标的颜色。
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
这将使按钮的直接后代中的所有图标变为黑色。
参考@ClarkeyBoy答案,如果使用最新版本的Font-Awesome
图标或使用fa
类,则以下代码可以正常工作
.fa.icon-white {
color: white;
}
并且,然后添加icon-white
到现有的类
尝试这个:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
这为我工作:
.icon-cog {
color: black;
}
对于4.7.0以上的Font Awesome版本,其外观如下:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css:
.blackiconcolor {color:black;}
您还可以向按钮图标添加额外的类...
如果您不想更改CSS文件,那么这对我有用。在HTML中,用颜色添加样式:
<i class="fa fa-cog" style="color:#fff;"></i>
您可以在style属性中指定颜色:
<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
要更改整个项目的字体真棒图标颜色,请在CSS中使用
.fa {
color : red;
}
您可以使用bootstrap类更改Font Awesome的图标颜色
用
例