使用 CSS 将字体真棒图标添加到整个站点的社交媒体链接

Question

我已经在网站上使用了各种字体很棒的图标。

我想在我的博客文章中为社交媒体链接添加图标，而不必手动将它们添加到每个链接。

一篇博文的结构如下

<div class="blog-post>
    <p>This is some text with a <a href="http:twitter.com">social media link</a> in it</p>
</div>

如何使用 css 定位这些链接添加 FA 图标？

Answer 1

要定位 twitter href，您可以使用此 CSS 选择器；

[href*="twitter"]

* 表示后续值必须出现在属性值内的某处。在这种情况下，它将定位包含字符串“twitter”的任何 URL。

将此与 :after 选择器结合使用将在目标链接之后放置一些内容。

[href*="twitter"]:after

要将它与 font-awesome 结合起来，你可以做这样的事情，记住将它限制在 blog-post 类中；

.blog-post [href*="twitter"]:after {
    font-family: FontAwesome;
    content: "\f099"; // twitter icon
    text-decoration: none; // removes underline from the icon in some browsers
    display: inline-block; // removes underline from the icon in some browsers
    padding-left: 2px; 
}