Adding an RSS icon font to the list of ways to connect on a WordPress website turned out to be a bit tricky. Even though SVG icons worked perfectly for other links in the sidebar widget, the RSS icon just wouldn't cooperate. After trying different approaches, including using an icon font and Font Awesome, the issue still persisted.
The connect with us widget is supposed to appear on all pages in the sidebar. However, there were instances where the font image didn't display at all or appeared misaligned compared to other icons. You can see examples of these discrepancies on the "Follow Us" widget at: and .
Furthermore, on certain pages like the Gallery page, an extra icon unexpectedly made its appearance. In an attempt to address this, a test widget was created featuring rss and rss-square icons. Though it has been removed, remnants of this experiment continue to linger on one specific page. Check out the sidebar and bottom of the same page here:
A snippet of the HTML code that somewhat 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>
Here's the CSS used for the SVG icons:
.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;
-webkit-border-radius: 50px;
border-radius: 50px;
color: #fefdff;
height: 50px;
margin: 0 0.5em 0.5em 0;
text-align: center;
width: 50px;
}
.sidebar-social-navigation li a:visited {
color: #fefdff;
}
.sidebar-social-navigation li a:hover,
.sidebar-social-navigation li a:focus,
.sidebar-social-navigation li a:active {
background-color: #129e6c;
}
.sidebar-social-navigation .icon {
height: 28px;
top: 12px;
width: 28px;
vertical-align: top;
}
Lastly, the additional CSS rules for the FontAwesome icon are as follows:
.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;
color: #2222ac;
position: absolute;
margin-right: 5px;
margin-right: 0.5rem;
text-align: left;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
}
ul.social-icons .rss a::before {
content: '\f09e'; /* curved lines */
}