I'm trying to create a rendering variant for a link list that would output a hyperlinked font awesome icon based on the content editor putting in a style when adding a link.

enter image description here

Is it possible to reference this property in a rendering variant?

Even if I were to use a custom template - I'm struggling to see how I would create a rendering variant that would insert this content editable style into an i tag based on a property on the template.

ie. for the link I would like to have something like:

<a href="wwww.google.com"><i class="fa fa-google"></i></a>

2 Answers 2


I solved this problem by extending a link tool we built (initially for NVelocity) for Scriban. A member of the community shows how to do the migration here.

Here you can see several methods exposed to help build the various parts of the link.

<div class="field-link">
    {{ $linkUrl = sc_linkTool.get_field_link_url i_item "Link" }}
    {{ $title = sc_linkTool.get_field_link_title i_item "Link" }}
    {{ $target = sc_linkTool.get_field_link_target i_item "Link" }}
    {{ $class = sc_linkTool.get_field_link_class i_item "Link" }}
    <a href="{{ $linkUrl }}" rel="noopener noreferrer" title="{{ $title }}" target="{{ $target }}"><i class="{{ $class }}"></i></a>

Not yet complete...

In the middle of converting to the new way

The "Link Description" is blank because I no longer need it for this use case.

enter image description here

Initially we stored the unicode text in the "Link Description" but it appears that sometime after Sitecore 8.2.7/SXA 1.7.0 the text is html encoded. This meant that our previous approach using a VariantField to render the Link field would no longer work.

enter image description here

enter image description here


This can be also achieved by

  1. cloning the Promo component and adding a Single-Line Text field to its Template.
  2. Adding a Rendering Variant to the cloned component with the i tag wrapped inside the link field.
  3. The font-awesome class value can be captured in a text field of the cloned component and be replaced in the data attribute field of the i tag through the Rendering Variant token replacement as described here: https://getsitecore.wordpress.com/2021/04/03/sitecore-sxa-adding-social-links-with-font-awesome-icons/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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