Hello, I apologize for the inconvenience. At the moment, Rank Math does not have a built-in feature to add icons or custom HTML to the homepage link in the breadcrumbs. However, you can use custom code snippets to modify your breadcrumbs beyond the options available in the settings.
If you want to add an icon or custom HTML to the homepage link in the breadcrumbs, you will need to add custom code snippets to your site. You can refer to this guide on adding filters to your WordPress site for more information.
If you need further assistance with this, please feel free to reach out to our support forum here. We’re always here to help.
Sources:
How to Enable Breadcrumbs on Your Website With Rank Math SEO » Rank Math
How to Customize Breadcrumbs in Rank Math » Rank Math
Hello,
Thank you for contacting us and bringing your concern to our attention.
You can add the icon to the homepage level and change the homepage URL of the Rank Math Breadcrumbs in WordPress Dashboard > Rank Math > General Settings > Breadcrumbs:
Hope that helps and please don’t hesitate to let us know if you have any other questions.
Thank you.
Hi Rakibuzzaman,
Thanks for the quick response!
It wasn’t quite the answer I had hoped for.
My wish is to insert an svg instead of the text. Do you know if it might be possible via the use of a filter?
Best regards,
Mathias
Hello,
To add the SVG icon on the breadcrumbs, you may base on this example and customize this filter on your site:
add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
$html = str_replace( 'Home', '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>', $html );
return $html;
}, 10, 3);
The icon is from this link:
https://icons.getbootstrap.com/icons/house-fill/
Hope that helps.
It was exactly what I was looking for, Thanks!
Hello,
We’re delighted to hear that this issue has been resolved. We appreciate your kind words and your support.
I’m closing this ticket now but if you ever have another question or need any help in the future, please don’t hesitate to create a new forum topic. We’ll be more than happy to assist you again.
Thank you for choosing Rank Math and have a wonderful day!
Cheers
