Using Font Awesome Icons For User Profile Items

[Joy Rex]

I'd like to use Font Awesome icons for some of the custom profile fields instead of text.

I've added fields so users can put their SoundCloud and Discogs URLs, but some are far too long and I've managed to standardize them a bit with a hyperlink:

What I'd like to do is replace the "My Discogs" and "My SoundCloud" text hyperlinks with a Font Awesome icon (although SoundCloud was added to FA5, which IPS hasn't implemented yet).

I tried putting the Font Awesome HTML code into the custom field formatting, but it's not working (breaks the layout horribly) - would I need to use the unicodes for the FA icons?

If so, instead of writing something like

<a href="{$content}"><i class="fa fa-user"></i></a>

I would need to do something like (pseudo code; I know that's not the proper way to use content:)

<a href="{$content}"><span style="content:'/f007'"></span></a>

?

Any advice on how to implement is appreciated.

[Fosters]

Have you tried copying the font awesome code?
I'm using this successful 

<i class="fa fa-address-book" aria-hidden="true"></i> - {$content}

results in

[Joy Rex]

7 hours ago, Fosters said:

Have you tried copying the font awesome code?
I'm using this successful 

<i class="fa fa-address-book" aria-hidden="true"></i> - {$content}

results in

Well, I did - let me try again and see if it works or not. Thanks for testing!

Any reason you have the ARIA attribute on it?

Just tried - it works! Must have been a computle gleetch 😀

[Joy Rex]

If I wanted for several profile fields to be inline instead of in a vertical list, would the best way be to put them in their own group and I can control the formatting that way?