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

Question

在我的 tumblr 博客 here, I use Font Awesome 上，将我的所有页面 link 设为图标而不是文本 link。所有图标都在斜体 class 下归档，我已将其设置为红色。但是，我更喜欢用不同的颜色来设计它们。无论如何我可以做到这一点吗？

这是所有相关代码，以备不时之需。

<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，但每个图标都会有一个唯一的 class。将每个图标的规则添加到模板顶部的样式标签中。

.fa-facebook {
   color:#FFCC00;
}

.fa-twitter {
   color:#EC0000;
}

等等。

编辑

或者您是在谈论同一 class/icon 的不同实例？

如果是这样，您将不得不为此使用 css 3 个选择器。像这样：

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

以此类推

有关第 n 个子选择器的更多信息 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。

希望这是有道理的。这里有一个 fiddle，您的代码可以正常工作：https://jsfiddle.net/lharby/7ov1u1ys/

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

How to have each Font Awesome icon be a different color?

tumblr