XenForo [JoyFreak] Social Profiles


Live example: Gaming Forum

This guide will run you through on how to get a little more creative and create a visual flair by displaying a Font Awesome icon on your social profiles. This is an improvement that was released in XF 2.2 and here we will walk through the various social media profiles you can use and display in a number of places, without having to install a single add-on.

  1. Create a custom user field. Go to Admin CP > Users > Custom user fields > Add field
  2. Field ID: This can be anything you want i.e. steam
  3. Title: This can be anything you want i.e. Steam
  4. Description: This can be anything you want i.e. Enter your Steam ID here.
  5. Display location: Contact details
  6. Field type: Single-line text Box
  7. General option: User editable, Moderator editable, Viewable on profile pages, Viewable in message user info
  8. Value display HTML: Copy and paste the code below.
  9. Wrapper display HTML: Copy and paste the code below.

Value display HTML
<a href="https://steamcommunity.com/id/{$value}/" target="_blank" data-xf-init="tooltip" title="{$value}"><i class="fab fa-steam-square fa-2x" style="color:#66c0f4"></i></a>

Wrapper display HTML
<span style="display: inline-block; margin-right: 6px;">{$value}</span>

That's the Steam profile done. If you follow the same steps for any profile you want added, you'll just need to fill out the fields for the "Value display HTML" and "Wrapped display HTML". It's pretty self-explanatory but if you do get stuck, I'd be happy to help.

Additional resources
HTML Color Codes
Font Awesome Icons


Live example: Gaming Forum