Solved: add icons in front of latest news widget news title links (Divi theme)

I am using Divi theme (for many of my projects). In it if for some case you would use the standard page layout with its sidebar, you will likely use widgets on the sidebar.

If you happen to be like me, that you would like to display latest news in the WordPress latest news widget on the sidebar, you will see that the news widget displays your desired amount of news, but it is a bit boring how they are displayed. Just paragraphs of text under each other.

To make things more graspable by the eye, you could consider adding icons in front of the title links. This can easily be achieved by a CSS trick.

How to add icons in front of the latest news widget news titles?

It’s easily achievable using the CSS option :before to add someting in front of an item.

To add an icon in front of the news widget titles just navigate to your WordPress theme editing custom CSS section and add this line in it to insert an arrow icon and a space in front of the post titles in the latest news widget:

.et_pb_widget a:before {content:”\279C \a0″}


That was easy, wasn’t it? Please note that the content: contains 2 different symbols – one is the arrow (\279C) and the next one (\a0) is an unbreakable space.

If you would like to add some more icons then look up a list of CSS hex icons and change the content attribute value accordingly. Here is a hint what to look for (check out the hex column next to each icon)

Post Author: Tom Pai