I am currently working on integrating FA icons into WordPress sidebar widgets, and I have encountered some challenges with displaying the icons as intended. When targeting two separate items, only one of them displays the icon in the given code snippet.
Any advice or feedback would be greatly appreciated! Here is the CSS I am using:
#recent-comments-2 li,
.widget_recent_entries li {
padding-left: 1.2em;
margin-bottom: 7px;
}
.widget_recent_entries li:before {
font-family: FontAwesome;
content: "\f040";
display: inline-block;
width: 1.2em;
margin-left: -1.2em;
}
#recent-comments-2 li:before {
font-family: FontAwesome;
content: "\f075";
display: inline-block;
width: 1.2em;
margin-left: -1.2em;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<li id="recent-posts-2" class="widget-container widget_recent_entries">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<li>
<a href="#">16OCT15</a>
</li>
<li>
<a href="#">15OCT15</a>
</li>
<li>
<a href="#">14OCT15</a>
</li>
<li>
<a href="#">13OCT15</a>
</li>
</ul>
</li>
<li id="recent-comments-2" class="widget-container widget_recent_comments">
<h3 class="widget-title">Recent Comments</h3>
<ul id="recentcomments">
<li class="recentcomments"><span class="comment-author-link">Bob</span> on <a href="#">16OCT15</a>
</li>
<li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">16OCT15</a>
</li>
<li class="recentcomments"><span class="comment-author-link">Bob</span> on <a href="#">15OCT15</a>
</li>
<li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">15OCT15</a>
</li>
<li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">Random Post</a>
</li>
</ul>
</li>