Customize the HTML of a link field from a custom theme I've a Link field named field_home_link, attached to a Content Type named Home, and I'm trying to customize how it is rendered as HTML from inside a custom theme.

Instead of the default generated HTML:

&lt;a tabindex="0" href="http://example.com"&gt;Link text&lt;/a&gt;


I need to render this HTML, adding custom CSS classes on it:

&lt;a href="http://example.com" class="btn-circle btn-circle--blue js-open-modal"&gt;
  Link text
&lt;/a&gt;


But I would like to have most flexibility as possible on the rendered HTML, not only adding classes. For example I might need to add other attributes on the tag &lt;a&gt; or maybe also change the tag &lt;a&gt; with something else.

Would be enough having access to the link's properties (url and text) and arrange them in some custom HTML code.

How can I do this?



I tried to create a template for the link field:

field--field-home-link.html.twig


but inside this template I don't know how to access link's elements (url and text) and I'm stuck with this:

{% for item in items %}
  &lt;!-- item.content contains the link element --&gt;
  {{ item.content }}
{% endfor %}


Is there no way to do something like this?:

{% for item in items %}
  &lt;a href="{{ item.content.url }}" class="btn-circle btn-circle--blue js-open-modal"&gt;
    {{ item.content.text }}
  &lt;/a&gt;
{% endfor %}
Try this:

{% for item in items %}
  &lt;a href="{{ item.content['#url'] }}" class="btn-circle btn-circle--blue js-open-modal"&gt;
    {{ item.content.text }}
  &lt;/a&gt;
{% endfor %}


Found it in a video from 2015, where MortenDK is showing off
It's about 25 min. in

DrupalCon Los Angeles 2015: Drupal 8 Theming with Love