Hello, we apologize for the issue you are facing. Currently, there isn’t an official method provided by Rank Math to directly replace the breadcrumb navigation icon with an image. However, you can customize the appearance of breadcrumbs using CSS.
To achieve this, you can add custom CSS to your theme that targets the breadcrumb icon and replaces it with your desired image. Here’s a general approach:
-
Identify the CSS class used for the breadcrumb icon in your theme. You can do this by inspecting the element in your browser.
-
Add Custom CSS: Go to your WordPress Dashboard → Appearance → Customize → Additional CSS and add the following code:
.your-breadcrumb-icon-class {
background-image: url('URL_TO_YOUR_IMAGE');
background-size: contain;
width: 20px; /* Adjust width as needed */
height: 20px; /* Adjust height as needed */
display: inline-block;
}
Replace your-breadcrumb-icon-class with the actual class name of the breadcrumb icon and URL_TO_YOUR_IMAGE with the URL of your new arrow icon.
-
Publish your changes.
This method allows you to visually replace the breadcrumb icon with an image of your choice. If you need further assistance or have specific requirements, please reply to this ticket, and a human agent from the Rank Math Support team will assist you further!
Hello,
Thank you for contacting us and bringing your concern to our attention.
You can add any custom icons for the Breadcrumbs Separator from WP Dashboard > Rank Math > General Settings > Breadcrumbs > Separator Character:
Hope that helps and please don’t hesitate to let us know if you have any other questions.
Thank you.
So I can insert html code with my separator icon?
Hello,
Yes, an HTML icon should work correctly here.
Let us know how it goes. Looking forward to helping you.
Thank you.
You cannot enter HTML in this field, this field only generates text. Give me an example of what a link to your own SVG icon should look like. Thanks.
Hello,
Apologies for the confusion but that field does indeed only generate text-base value.
What you can do here is to make use of our filter code to change the breadcrumb separator like so:
add_filter( 'rank_math/frontend/breadcrumb/settings', function( $settings ) {
$settings = array(
'separator' => '<img src="your-image-path" />'
);
return $settings;
});
This code will allow you to insert images and other HTML elements effectively as your breadcrumb separators.
You may refer to this guide on how to add filters to your website: https://rankmath.com/kb/wordpress-hooks-actions-filters/
Hope that helps.
Hello,
Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.
If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.
Thank you.
