I have tried adding an RSS icon font to my list of ways to connect with us in the sidebar of my WordPress website. For each of the ones that show in the sidebar widget, I used SVG icons successfully but the one for RSS didn't work. So I tried to use an icon font for that instead, which didn't work, then I tried a Font Awesome font.
The widget containing the connect with us links is in the sidebar, which is on all pages. However, the font image doesn't appear on all pages. On some pages, it doesn't appear at all. See the Follow Us widget in the sidebar at: https://www.botanical-art.baeecorp.org/news/
On some pages it appears but raised up above the others. See https://www.botanical-art.baeecorp.org/achievements/
In addition on that page and on the Gallery page, a second one appears: While experimenting with this, I tried out different approaches using rss and rss-square in a separate widget at the bottom of the sidebar. That experimental widget has been deleted but on one page because I thought I had one that worked. However, a test icon in it appears appears at the bottom of the sidebar on one page using the RSS-square icon. See Follow Us in sidebar and the bottom of the sidebar: https://www.botanical-art.baeecorp.org/achievements/
The HTML code that partially works is
<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>
The CSS for the SVG icons is as follows:
.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;
}
The CSS added for the FontAwesome icon is:
.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 */
}
Use this URL in your Head tags
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
And replace your SVG icons with the following lines.
<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>
I think this will be helpful for you.