将鼠标悬停在字体真棒图标上时会更改颜色? [英] Change color when hover a font awesome icon?
本文介绍了将鼠标悬停在字体真棒图标上时会更改颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
基于Awesome字体文档,我创建了这个图标:>
Base in the Font Awesome documentation I create this icon:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
此代码创建此html:
This code create this html:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x">::before</i>
<i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>
它是一个堆叠的标志图标.我想在悬停事件上更改图标颜色,我尝试了以下所有方法:
It is a stacked Flag icon. I want to change the icon color on Hover event, I tried with all these:
.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}
但不起作用.
推荐答案
如果只想更改hover
上标志的颜色,请使用以下命令:
if you want to change only the colour of the flag on hover
use this:
.fa-flag:hover {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-flag fa-3x"></i>
这篇关于将鼠标悬停在字体真棒图标上时会更改颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文