Question

在here上的tumblr博客上，我使用Font Awesome将我的所有页面链接设为图标而不是文本链接。所有的图标都以斜体字体提交，我将其设置为红色。但是，我更喜欢用不同的颜色来设计它们。无论如何我能做到吗？

以下是您需要时的所有相关代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> [ I believe this is just to tell the code where font awesome comes from. ]

<i class="{text:font awesome}"></i></a> [ embedding the icons. ]

i, em {
color:{color:italic};
font-size:17px;
font-family: 'Satisfy', cursive;
text-shadow: 1px 1px 17px #cc0000;
} [ My italics class ]

Answer 1

是。

您必须编写自己的CSS，但每个图标都有一个唯一的类。将每个图标的规则添加到模板顶部的样式标记中。

.fa-facebook {
   color:#FFCC00;
}

.fa-twitter {
   color:#EC0000;
}

等等。

修改

或者您在谈论同一类/图标的不同实例？

如果是这样，你将不得不使用css 3选择器。像这样：

.fa-heart:nth-child(1) { color:#FFCC00; } .fa-heart:nth-child(2) { color:#FF0099; } .fa-heart:nth-child(3) { color:#EC0000; }

等等。

有关nth-child选择器的更多信息here

假设它们共享相同的父元素。

<强>更新

根据你的html结构，你需要像这样编写你的css：

#links div:nth-child(1) a i { color:red; } #links div:nth-child(2) a i { color:#FFCC00; } #links div:nth-child(3) a i { color:#0099AA; }

等。在这种情况下，#links是父级，并且您已将每个锚包装在div元素中，因此您必须将#links的第n个子节点作为div。

希望这是有道理的。你的代码在这里有一个小提琴：https://jsfiddle.net/lharby/7ov1u1ys/

如何让每个Font Awesome图标都是不同的颜色？

1 个答案: