Change Heart Divider to another image

Hi… Great Theme you have here.

I have one request tho…

How do you change heart divider with my own custom image? And, when i input code:
<hr class = ‘section-divider’>
in static front page, the heart symbol is not there.


Hi @izza,

I hope you are well today and thank you for your question.

How do you change heart divider with my own custom image?

The heart divider divider is displayed using the Font Awesome font so you can change it to any of its icons as displayed here by using the following CSS code and changing the code “\f111” to the font icon code.

body hr.section-divider:after {
  content: "\f111";

You can use the above CSS code as described on this page

And, when i input code:
<hr class = ‘section-divider’>
in static front page, the heart symbol is not there.

It’s displaying for me fine using the following code in the text editor of the page so could you please try using it?

<hr class='section-divider'>

Best Regards,

Hello, I have used your clear instructions to change the heart symbol in the divider using the Custom CSS plugin and many of the symbols work.

However for some reason the Diamond symbol I would like to use “f\219” does not work, it just shows a square box. My site is

attached are a couple of screen shots.

Thank you

Hi Ross,

Actually you are facing the issue as described in the following reply and there i have also shared the solutions to resolve it.

Best Regards,

THank you for the reply Movin.

I have looked through that article and tried various of the plugins but I still cant get “\f219” (the diamond symbol) to come up…

Lots of the other symbols work perfectly just not this one.

Still at a loss here sorry


It seems the diamond icon is added in the font awesome version 4.3 but our theme is using the Font Awesome version 4.2.0 therefore it’s not working for you.

To make it work you have to update the theme font awesome file unite/inc/css/font-awesome.min.css with the latest version of it.

THank you sir, that worked perfectly :slight_smile:

You are most welcome here :slight_smile:

So maybe a dumb question, but how do you go about updating the theme font exactly? Where in wordpress do I go? I have not been able to change mine successfully it must be this problem. It just showed the unicode number for each of the ones I tried. I really want the anchor.

@arwene Our the uses the Font Awesome version 4.2.0 and the anchor tag is added in the version 3.1 so it should work fine.

Could you please tell me how you are using it on your site and share me the page URL from your site where it’s not displaying correctly so that i can troubleshoot it?

@movin The heart shows up on the blog area of my website to separate the different posts. It came standard as part of your theme. I used the directions you have above to insert the following CSS into my site and I replaced the f111 with f13d, which I assume is the correct code for the anchor from this site
Here is what I entered:

body hr.section-divider:after {
content: “\f13d”;

I removed this extra code when I saw that it just added those letters and not the symbol so I have included a screen shot of what it did. I tried this without the extra \ and it does the same thing. I also tried several other symbols and it did the exact same thing to me every time.

@arwene It’s not working because the required symbol \ is not working in the theme custom CSS option so instead of using this code by adding it in the theme custom CSS option, you can try using it on your site by using the solution as described on the following page.