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. Sugarstopindonesia.com

Thanks

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 https://fortawesome.github.io/Font-Awesome/icons/ 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 http://freewptp.com/tutorials/how-to-use-custom-css-in-wordpress-site/

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,
Movin

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 www.crystaledge.co.nz

attached are a couple of screen shots.

Thank you
Ross

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.

https://colorlibsupport.com/t/500px-social-icon/#post-48625

Best Regards,
Movin

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

Regards
Ross

It seems the diamond icon http://fortawesome.github.io/Font-Awesome/icon/diamond/ 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. http://fortawesome.github.io/Font-Awesome/icon/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 www.arwenartanddesign.com/blog 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 http://fortawesome.github.io/Font-Awesome/icon/anchor/
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.

http://freewptp.com/tutorials/how-to-use-custom-css-in-wordpress-site/