Title: Class for the breadcrumb Last modified: February 17, 2019 --- # Class for the breadcrumb * [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * (@tapiohuuhaa) * [7 years, 4 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/) * It would be nice to have class for the home icon. * :hover::after could create as if title text for handheld devices, but that needs class for the home icon. [https://www.sanaristikkofoorumi.net/wordpress/forums/](https://www.sanaristikkofoorumi.net/wordpress/forums/) * has this CSS for breadcrumbs: * .bsp-home-icon:hover::after { position:absolute; left:5px; top:20px; display: block; font-size:11px; color:white; background-color:#333; padding:3px; white- space:pre; content:’Etusivu’; border-radius:7%; -webkit-border-radius:7%; } * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fclass-for-the-breadcrumb%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Author [John Havlik](https://wordpress.org/support/users/mtekk/) * (@mtekk) * [7 years, 4 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11216410) * I’m a little confused by your request. On the page that you linked to that is using Breadcrumb NavXT, the icon is being added via CSS rather HTML markup (via modifying the home template settings for Breadcrumb NavXT). As it stands, you won’t be able to add a class to your icon as long as it is added via CSS. I recommend switching to using the Home template in the Breadcrumb NavXT settings page to add the icon. It should be as simple as adding the HTML markup for an image ( e.g. an `img` tag) to the Home Template and Home Template (unlinked) settings. The following article discusses how to modify the template to include the icon: [https://mtekk.us/archives/guides/use-an-iconimage-for-the-home-breadcrumb/](https://mtekk.us/archives/guides/use-an-iconimage-for-the-home-breadcrumb/) * Thread Starter [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * (@tapiohuuhaa) * [7 years, 4 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11216883) * I assumed that the home icon would be dashicon and set by CSS. But I wondered how that has been done. Sorry It does have for a tag class, but span tag does not have class. Sorry I didn’t look the code carefully. My mistake. * a.home span:hover::after {… works as expected. * Thread Starter [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * (@tapiohuuhaa) * [7 years, 4 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11217321) * It is better to define home icon with CSS as dashicon than make some changes to templates. * I found that home dashicon using bbp style pack works totally unreliable. Sometimes browser doesn’t render it. There is just some messy code instead of home icon. I set it also myself: * .breadcrumblist a.home span::before, .bsp-home-icon::before { content: “\f102”; font: 400 0.9rem/1 dashicons; } Now the home icon is exactly the same size in forum area and other pages. * Thread Starter [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * (@tapiohuuhaa) * [7 years, 4 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11217546) * I had just one CSS-related problem (I asked this in [https://wordpress.org/support/topic/breadcrumb-separator/](https://wordpress.org/support/topic/breadcrumb-separator/)) * How I could set for * [https://www.sanaristikkofoorumi.net/wordpress/ristisanatehtavat/](https://www.sanaristikkofoorumi.net/wordpress/ristisanatehtavat/) * exactly the same looking separator as * [https://www.sanaristikkofoorumi.net/wordpress/forums/](https://www.sanaristikkofoorumi.net/wordpress/forums/) * I looked the CSS-file for bbp style pack, but there is no CSS for the class bbp-breadcrumb-sep, which I could use as a model for separator for for other pages. * It has been defined elsewhere. Separator in the forum area looks better than in other pages so I would like to get the same style for other pages. * Plugin Author [John Havlik](https://wordpress.org/support/users/mtekk/) * (@mtekk) * [7 years, 3 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11261457) * Unless you changed something since your last post, it appears the separators are the same on both linked pages. Or, at least for me they are rendered the same (> character). * Thread Starter [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * (@tapiohuuhaa) * [7 years, 3 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11261772) * Yes, I solved that by setting as separator an empty span tag with the same class, which has been used in the forum area. In fact the character is not ordinary “ >”, but dashicon f345. Because I didn’t know what CSS had been defined for the breadcrumbs of forum pages I used dashicon. At least dashicon looks exactly the same everywhere. * Because it is possible to define HTML-code as separator, the plugin is ok. Automatic generated span tag is not necessary. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Class for the breadcrumb’ is closed to new replies. * ![](https://ps.w.org/breadcrumb-navxt/assets/icon.svg?rev=1927103) * [Breadcrumb NavXT](https://wordpress.org/plugins/breadcrumb-navxt/) * [Support Threads](https://wordpress.org/support/plugin/breadcrumb-navxt/) * [Active Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/unresolved/) * [Reviews](https://wordpress.org/support/plugin/breadcrumb-navxt/reviews/) * 6 replies * 2 participants * Last reply from: [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/) * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/class-for-the-breadcrumb/#post-11261772) * Status: not resolved