Add the functions to your WP theme's functions file to extend a BuddyPress profile.
You add fields as usual to the profile fields at: /wp-admin/users.php?page=bp-profile-setup
Then change the list of profiles ($profiles array) starting Line 19 above to include those you wish to loop through and display on a user's profile.
It checks for a specific icon, if not it uses a default one (which you'll need to upload to /wp-content/themes/your-theme/assets/images/custom-web-link.png).
To override the default icon, just upload a new icon to the same directory with the right name - it uses WP's sanitize_title() function so e.g. a field called 'Facebook Profile' would look for an image called facebook-profile.png.
Thanks for your contribution - extremely helpful!! I've used this code as you've laid it out above and worked perfectly.
However I tried it again and this time the link is there, but the icon is not visible for the different social networks. When I add the default icon image - it only shows that image in place of all other icons.
The image files are in the correct folder, with the correct file names as per the profile field labels - except the only icon that shows is the default icon (with links that are set in the profile fields).
Is there any fix that I can try to resolve this, or work around it? Maybe defining $profile_icon_uri individually for each profile field?