Link icon picker example

Install Fontawesome Icon Picker Addon

composer require thisisbd/silverstripe-fontawesome-iconpickerfield

Create a file named CustomLink.php in mysite/code

<?php

class CustomLink extends DataExtension
{

    private static $db = array(
        'FAIcon' => 'varchar'
    );

    public function updateCMSFields(FieldList $fields)
    {
        $fields->addFieldsToTab(
            'Root.Main',
            array(
                FontAwesomeIconPickerField::create(
                    'FAIcon',
                    'Icon'
                )
            )
        );
        return $fields;
    }

    public function getIcon()
    {
        $icon = $this->owner->FAIcon ? Convert::raw2att( $this->owner->FAIcon ) : '';
        return $icon ? "<i class='fa fa-fw $icon' aria-hidden='true'></i>" : '';
    }
}

In your config.yml

...
Link:
  extensions:
    - CustomLink
...

Create a file named Link.ss in theme directory

<a href='{$LinkURL}'{$TargetAttr}{$ClassAttr}>
    {$Icon}{$Title}
</a>

Optional right side icon selector

Add the template in your config.yml

...
Link:
  extensions:
    - CustomLink
  templates:
    - iconright
...

Create a file named Link_iconright.ss in theme directory

<a href='{$LinkURL}'{$TargetAttr}{$ClassAttr}>
    {$Title}{$Icon}
</a>