为什么所有页面上都没有显示 Font Awesome 图标？

Question

我尝试将 RSS 图标字体添加到我的 WordPress 网站侧边栏中与我们联系的方式列表中。对于侧边栏小部件中显示的每个图标，我都成功使用了 SVG 图标，但 RSS 图标却不起作用。所以我尝试使用图标字体来代替，但这不起作用，然后我尝试了 Font Awesome 字体。

包含“与我们联系”链接的小部件位于所有页面上的侧边栏中。但是，字体图像并未出现在所有页面上。在某些页面上，它根本不出现。请参阅侧栏中的“关注我们”小部件： https://www.botanical-art.baeecorp.org/news/

在某些页面上，它会出现，但会高于其他页面。看 https://www.botanical-art.baeecorp.org/achievements/

此外，在该页面和图库页面上，还会出现第二个：在对此进行试验时，我在侧边栏底部的单独小部件中尝试使用 rss 和 rss-square 的不同方法。该实验性小部件已被删除，但在一页上，因为我认为我有一个可以工作的小部件。但是，其中出现的测试图标使用 RSS 方形图标出现在一页侧边栏的底部。请参阅侧边栏和侧边栏底部的“关注我们”： https://www.botanical-art.baeecorp.org/achievements/

部分有效的 HTML 代码是

<div class="sidebar-social-navigation">
    <ul class="social-icons element">
        <li><a href="https://www.facebook.com/baeeorg" style="-moz-user-select: none;"><span class="screen-reader-text">Facebook</span><svg class="icon icon-facebook" aria-hidden="true" role="img" title="Facebook"> <use href="#icon-facebook" xlink:href="#icon-facebook"></use> </svg></a></li>
        <li><a href="https://www.flickr.com/photos/baee/15449796790/" style="-moz-user-select: none;"><span class="screen-reader-text">Flickr</span><svg class="icon icon-flickr" aria-hidden="true" role="img" title="Flickr"> <use href="#icon-flickr" xlink:href="#icon-flickr"></use> </svg></a></li>
        <li><a href="https://www.pinterest.com/baee0196/" style="-moz-user-select: none;"><span class="screen-reader-text">Pinterest</span><svg class="icon icon-pinterest-p" aria-hidden="true" role="img" title="Pinterest"> <use href="#icon-pinterest-p" xlink:href="#icon-pinterest-p"></use> </svg></a></li>
        <li><a href="https://www.twitter.com/BaeeArtists" style="-moz-user-select: none;"><span class="screen-reader-text">Twitter</span><svg class="icon icon-twitter" aria-hidden="true" role="img" title="Twitter"> <use href="#icon-twitter" xlink:href="#icon-twitter"></use> </svg></a></li>
        <li class="element"><a href="https://www.botanical-art.baeecorp.org/feed" aria-label="RSS"><span class="screen-reader-text">RSS</span><i aria-hidden="true" data-prefix="fas" data-icon="rss" role="img" xmlns="http://www.w3.org/2000/svg" class="rss fa fa-rss fa-2x" style="font-size: 28px;"></i></a></li>
    </ul>
</div>

SVG 图标的 CSS 如下：

.sidebar-social-navigation {
    margin: 0 0 -8px 0;
    padding: 0;
}

.sidebar-social-navigation ul.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons .element {
  position: relative;
  display: inline-block;
}

.sidebar-social-navigation li a:link {
    background-color: #2222ac;  /*----Persian blue ----*/
    -webkit-border-radius: 50px;
    border-radius: 50px;
    color: #fefdff;  /*----Splashed white ----*/
    height: 50px;
    margin: 0 0.5em 0.5em 0;
    text-align: center;
    width: 50px;
}

.sidebar-social-navigation li a:visited {
    color: #fefdff;  /*----Splashed white ----*/
}

.sidebar-social-navigation li a:hover,
.sidebar-social-navigation li a:focus,
.sidebar-social-navigation li a:active {
    background-color: #129e6c;    /*   pool table green    */
}

.sidebar-social-navigation .icon {
    height: 28px;
    top: 12px;
    width: 28px;
    vertical-align: top;
}

为 FontAwesome 图标添加的 CSS 是：

.social-icons .element a::before {
  content: "";
    font: normal normal normal 28px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    vertical-align: top;
/*--adjust as necessary--*/
    color: #2222ac;  /*----Persian blue ----*/
    position: absolute;
    margin-right: 5px;
    margin-right: 0.5rem;
    text-align: left;
    top: 0;
    bottom: 0;
/*  left: 0; */
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

ul.social-icons .rss a::before {
/*   content: '\f143'; */ /*square */
    content: '\f09e'; /* just curved lines */
}

Answer 1

在您的 Head 标签中使用此 URL

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

并将 SVG 图标替换为以下行。

<i class="fa fa-facebook"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-rss"></i>

我想这对你会有帮助。

Answer 2

非常有帮助。工作完美 ！