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 [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; 
}

Answer 2

在CSS块中使用:after并写成：

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

使用CSS在全网站的社交媒体链接中添加字体真棒图标

2 个答案: