Mercury Dokumentation

Link-Text display

In addition to the basic display options such as bullet points, navigation, or in a row, the appearance of the link texts can also be varied in a link sequence.

For example, only an icon can be displayed instead of the link text. To do this, enter icon:name-of-icon in the Text field of a link.

Or an icon plus text can be displayed. To do this, enter the following in the Text field: Your text||icon:name-of-icon. The character string || separates the text from the icon selection.

The options for the link text display have always to be entered in the Text field in the link sequence content. Each option starts with a specific character string, such as ‘icon:’. Multiple options are separated by the character string ||.

  • icon:name-of-icon - Displays the selected icon before the text. List of possible icons.
  • icon-last:name-of-icon - Displays the selected icon after the text.
  • image:path-to-image - Displays the selected image before the text. The size of the image is adjusted to match the height of the text. This option is primarily intended for displaying custom SVG graphics such as logos or special icons in the link sequence.
  • title:text for the title - Sets the specified text as the HTML ‘title’ attribute for the generated link. This can be used, for example, to optimize accessibility. This is an expert option. 
  • class:name-css-selector(s) - Adds the specified CSS selectors to the HTML of the generated link. This can be used, for example, for special formatting via a separate CSS style sheet. This is an expert option.
  • id:name - Adds the specified name as an ID attribute to the HTML of the generated link. This can be used, for example, for special formatting via a separate CSS style sheet. This is an expert option.

If there is no known character string for special editions such as ‘icon:’ at the beginning, the text is shown directly.

An example of an entry with various options:  

Text, icon and Title||icon:thumbs-o-up||title:This is the title

Examples for the link text display