yoast breadcrumb image separator

Question

I'm working with Wordpress CMS and I use Yoast Breadcrumbs (http://wordpress.org/extend/plugins/breadcrumbs/ or http://yoast.com/wordpress/breadcrumbs/) to add a breadcrumb to the site but in my case I need to replace separator with image like the image below:

The image above is a breadcrumb output that I like to implement. And the default output of Yoast Breadcrumbs is like this You are here: Home » Uncategorized » Hello world! and the plugin has and admin option to edit the separator, but it is preventing HTML tag.

Answer 1

There is a far-more cleaner way to do this.

Read http://hookr.io/filters/wpseo_breadcrumb_separator/ , here they mention a hook. If u use this hook you can easily overwrite the seperator by just default HTML.

For example:

function filter_wpseo_breadcrumb_separator($this_options_breadcrumbs_sep) {
    return '<i class="fa fas fa-chevron-right"></i>';
};

// add the filter
add_filter('wpseo_breadcrumb_separator', 'filter_wpseo_breadcrumb_separator', 10, 1);

Answer 2

Yoast breadcrumb is now succeeded by WordPress SEO Plugin according to: http://yoast.com/wordpress/breadcrumbs/ you can customize the breadcrumb separator in the Wordpress SEO admin under Internal Links

Answer 3

I realize this is an old post, but I found this when searching for the same problem today. As of Yoast SEO Version 3.2.3, you CAN put HTML in the field for "Separator between breadcrumbs:" in Advanced settings for the plugin. I've used this code, for instance where I'm using Font Awesome but you could easily do the same thing for an image within your stylesheet:

<span class="divider"></span>

And my CSS:

p#breadcrumbs span.divider:before {
    content: '\f105';
    font-family: 'FontAwesome';
    padding-left: 10px;
    padding-right: 6px;
}

I hope this will help some =)

Answer 4

In the settings for the separator you can add <span class="sprite breadcrumb-seperator">»</span> This way you have a visible separator. But you can set a sprite based image on it.