使用 CSS 将字体真棒图标添加到网站范围内的社交媒体链接答案

【问题标题】：Add font-awesome icons to social media links sitewide using CSS使用 CSS 将字体真棒图标添加到网站范围内的社交媒体链接
【发布时间】：2015-01-13 13:42:02
【问题描述】：

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

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

一篇博文的结构如下

<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 图标来定位这些链接？

【问题讨论】：

标签： css font-awesome

【解决方案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; 
}

【讨论】：

【解决方案2】：

在你的 CSS 块中使用 :after 并写成这样：

.blog-post:after {
  font-family: sans-serif; //or any other you want
  content: "\f099"; // twitter icon
  .............  //other stuff

【讨论】：