How can I replace the Home link with an image?

latikas

12/25/22, 11:22 AM

I want to replace the Home link shown in breadcrumbs with an icon.

How can I achieve this?

1 + 2

breadcrumbs

Hudri

12/25/22, 11:44 AM

Not an answer, but actually CSS is a very good solution for accessability reasons: A blind person with a screen reader should still get the text "Home" (e.g. with `class="visually-hidden"`) instead of the icon.

apaderno

12/25/22, 2:00 PM

Even with JavaScript and CSS, there is still the need to change the markup used for the breadcrumb. Answers could describe how the breadcrumb markup can be altered.

Score:0

Drupal

Balde Binos

12/27/22, 1:51 AM

I’m not in the theme business but I suppose you can just override the twig template.

Assuming that the default template is in use:

[your_site]/core/themes/bartik/templates/classy/navigation/breadcrumb.html.twig

Just copy it to your theme templates folder and change it something like:

{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}
{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
    <ol>
  {% for item in breadcrumb %}
      <li>
      {% if item.url %}
        {% if item.text == "Home" %}
          <a href="{{ item.url }}">
            <img src="some_src" alt="Some alt">
          </a>
        {% else %}
          <a href="{{ item.url }}">{{ item.text }}</a>
        {% endif %}
      {% else %}
          {{ item.text }}
      {% endif %}
      </li>
  {% endfor %}
    </ol>
  </nav>
{% endif %}