SXA 1.8 want to output link list with font awesome icons

Question

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.

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>

Answer 1

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>
</div>

Not yet complete...

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

---

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.

Answer 2

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/