Question

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

包含connect with us链接的小部件位于侧栏中，位于所有页面上。但是，字体图像不会出现在所有页面上。在某些页面上，它根本不显示。请参阅侧栏中的Follow Us小部件： https://www.botanical-art.baeecorp.org/news/

在某些页面上显示但是高于其他页面。看到 https://www.botanical-art.baeecorp.org/achievements/

此外，在该页面和“图库”页面上，还会显示第二个：在尝试使用此功能时，我尝试使用rss和rss-square在侧边栏底部的单独小部件中使用不同的方法。该实验小部件已被删除，但在一个页面上，因为我认为我有一个有效。但是，其中的测试图标显示在一个页面的侧边栏底部，使用RSS-square图标。请参阅侧栏中的“关注我们”和侧栏的底部： 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标记中使用此网址

<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>

我认为这会对你有所帮助。

为什么不在所有页面上显示Font Awesome图标？

1 个答案: