将 Font Awesome 图标添加到 Class

Question

有谁知道如何将特定的超赞字体图标添加到它自己的图标中 class？

例如，我正在使用这个图标：

<i class="fa fa-home" aria-hidden="true"></i>

并添加了：

.fa-home{
background: #ff0019;
padding: 5.2px 6.5px 8.5px 6.5px;
border-radius: 50%;
}
.fa-home:hover{

background: #333;
}
.fa-home:before {
color:#FFFFFF;
}

但是，我想在我网站的不同区域使用 .fa-home 而不是那种特定的样式。

有什么想法吗？

Answer 1

为您想要设置样式的特定字体真棒图标添加一个 ID。

<i class="fa fa-home" id="edit" aria-hidden="true"></i>

然后像这样改变css-

#edit.fa-home{
background: #ff0019;
padding: 5.2px 6.5px 8.5px 6.5px;
border-radius: 50%;
}
#edit.fa-home:hover{
background: #333;
}
#edit.fa-home:before {
color:#FFFFFF;
}

分配此 ID 只会更改其标签中包含该 ID 的图标。此样式不会应用于没有 id "edit".

的图标

将 Font Awesome 图标添加到 Class

Add Font Awesome Icon To Class

css

class

font-awesome