【发布时间】：2018-07-21 02:36:15
【问题描述】：
我已尝试在我的 WordPress 网站侧边栏中与我们联系的方式列表中添加 RSS 图标字体。对于侧边栏小部件中显示的每个图标，我都成功地使用了 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 */
}
【问题讨论】：
标签： css svg font-awesome glyphicons