fa图标被Disqus评论数覆盖

问题描述

我正在尝试在诸如image这样的单词注释旁边的注释计数旁边显示一个超棒的字体图标。我想要它，以便单击图标，计数或单词注释的任何区域将链接到帖子注释。但是，我遇到一个问题，其中disqus评论数不断覆盖我的超链接。 代码1：使用下面的代码，我得到的是注释计数，如'0'：

<a href="<?PHP the_permalink() ?>#disqus_thread"><i class="far fa-comments"></i>Comments</a>

代码2：使用下面的代码，我可以得到想要的效果，但是只有计数是可单击的，注释图标和单词注释不是

<span ><i class="far fa-comments"></i><a href="#disqus_thread"></a> comments</span>

使用最终代码，我得到三个零0 0 0

<span >
    <a href="#disqus_thread"><i id="comment" class="far fa-comments"></i></a>
    <a href="<?PHP the_permalink(); ?>#disqus_thread"></a>
    <a href="#disqus_thread">comments</a>
</span>

这是我购买的wordpress主题，主题创建者的帮助不是很大。我将不胜感激。

谢谢！

解决方法

这是一个CSS解决方案：）

.comments::before {
  font-family: "FontAwesome";
  content: "\f086";
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<a href="#disqus_thread" class="comments"> comments</a>

或者，您可以通过CSS添加链接的所有内容：

.comments::before {
  font-family: "FontAwesome";
  content: "\f086  Comments";
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<a href="#disqus_thread" class="comments"></a>