By darkdim on

Hi, all!
I have html code: <a href="about-us.html"><i class="fa fa-angle-right"></i> About Us</a>
In template this link output as {{ link('item.title, item.url) }}
If I added tag i to title: {{ link('<i class="fa fa-angle-right"></i> ' ~ item.title, item.url) }}
Then result on screen <i class="fa fa-angle-right"></i> About Us Only local images are allowed.
http://www.screencast.com/t/AJEldPRiA

How to add tags to the text link?

⋅ Categories: Drupal 8.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

You can't do that with twigs link function. You'd do it something like this:

<li><i class="fa fa-angle-right"></i>{{ link(item.title, item.url) }}</li>

If you want the icon inside the <a></a> consider a different method, such as using the url() function instead: https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
darkdim’s picture

darkdim
Primary language English
Location Kyiv
commented

Hi, Jeff!
Thank you for your answer!
I solved this issue in a way: 

        {% set title %}
          <i class="fa fa-angle-right"></i> {{ item.title }}
        {% endset %}
        {{ link(title, item.url) }}

But I want to understand, maybe there is a more elegant solution...

Jeff Burnz’s picture

Jeff Burnz commented

Ha, I think thats fine, perfectly elegant solution!

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
devkinetic’s picture

devkinetic commented

How did you get this to work, link() seems to be escaping the html i set in 'title'.

Ryan aka Devkinetic
Sr. Web Developer

darkdim’s picture

darkdim
Primary language English
Location Kyiv
commented

This piece of code allows the link to pass markup

    // The text has been processed by twig already, convert it to a safe object
    // for the render system.
    if ($text instanceof \Twig_Markup) {
      $text = Markup::create($text);
    }
vaninv’s picture

vaninv commented

Thank you so much )

Aporie’s picture

Aporie
Primary language French
commented

You are probably trying to set your title this way :
{% set title = '<span class="glyphicon'></span>' ~ item.title %}
And it's not working ... was running under the same issue.

Actually the elegant solution is to use {% set %} and {% endset %}, so you can write html between the tags.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Wow, thanks for clarifying that there is a difference!

This works:

{% set link_text %}{{ item.title|raw }}{% endset %}
{{ link(link_text, item.url) }}

And this does NOT work:

{% set link_text = item.title|raw %}
{{ link(link_text, item.url) }}

I would have thought that both are the same and run through the same filtering and escaping operations in Twig, but alas, they seem to be different.

Daniel 'sun' Kudwien
makers99

joseabrahamg’s picture

joseabrahamg commented

Thank you! It works for me!

macherif’s picture

macherif
Location Paris
commented

I got the same issue I gave it a try with hooks but nothing works. Finally I did same as you guys:

   <li{{ item.attributes.addClass('nav-item') }}>

        {% set link_text %}
          {% if(item.url.routeName == 'user.page') %}
            <i class="fas fa-user-alt"></i>
          {% elseif (item.url.routeName == 'user.login') %}
            <i class="fas fa-sign-in-alt"></i>
          {% elseif  (item.url.routeName == 'user.logout') %}
            <i class="fas fa-sign-out-alt"></i>
          {% endif %}
          {{item.title|raw }}
        {% endset %}
        {{ link(link_text, item.url, { 'class': classes_link }) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>

But I still think there's another way to put HTML as a title same same as in D7 I remember we set a HTML attribute as TRUE in l() function ...

joseabrahamg’s picture

joseabrahamg commented

Thank you! It works for me!