5

I would like to have a font awesome icon in my link text.

<i class="fa fa-pencil"></i>Blogs

Since link fields are generated in LinkGenerator.php, they get escaped.

if (!SafeMarkup::isSafe($variables['text'])) {
  $variables['text'] = Html::escape($variables['text']);
}

There doesn't seem to be any way to bypass this by setting a HTML option to TRUE.

Is there any way to achieve this?

  • What's function you use in file twig template? – MrD Jan 21 '16 at 2:41
5

You can define your own template.

For example as inline:

$link = array(
    '#type' => 'inline_template',
    '#template' => '<a href="{{ url }}"><i class="fa {{ fa_icon }}"></i>{{ title }}</a>',
    '#context' => array(
        'url' => $url,
        'title' => $title,
        'fa_icon => 'fa-pencil',
    ),
  ); 

If you are working on a theme or module you should define a template with its own name like link_fa, so that it can be overridden by other modules or themes.

  • Thanks for the reply. Would there be any way for the user to define their own icon using this method? – cheesetriple Jan 21 '16 at 9:53
  • You can do this with two methods, the simple one would be to add a field to your content type for the icon and then use the inline_template in preprocess. The second would be a module to define this special field with user input and field formatters, so you can easily extend any site with this feature. – 4k4 Jan 21 '16 at 10:19
1

As you want to let the user chose an icon, maybe the Link Icon module fits your needs.

The Link icon module is a simple link field formatter to create icon classes based on a predefined set of link titles.

Link icon is an icon-agnostic formatter, meaning it doesn't care for whatever icon you use. Any icon will simply work. It doesn't hard-code icon names, nor includes icons.

Drupal supports unlimited values, the limitation is your available icon fonts.

Or if it doesn't fit, you can have a look at the modules code, to see how they have implemented the field widget and the field formatter as a starting point.

0

Every font awesome icon also has a unicode associated with it, see the cheatsheet. These unicodes look like &#xf040;. This means that you do not need to use the class, but can use this as a character instead.

There is however one big BUT. Just adding the unicode does not work, you also have to apply the font-awesome font to the HTML selector.

So in order to make <i class="fa fa-pencil"></i>Blogs display a pencil, you could also use <i>&#xf040;</i>Blogs and add font-family: FontAwesome to the CSS of <i>:

i {
  font-family: FontAwesome;
  font-style: normal;
}

Also read this Stack overflow question.

UPDATE:

I misread the question, I thought the class got stripped from the tags, but it seems the entire tag is removed. In that case this is less helpful...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.