Page Comparison

Here is a quick guide about how to add a new icon to the user's profile. 

We will use a child theme and assume you're using one as well. So you will be able to update Woffice without loosing your changes. 

1. Creating your text field

To get started, we need to add a new field within the user profile. You can do that from your Wordpress Admin > Users > Profile Fields > Add New Field 

Fill in the input's name and select "Text Box" for the type. The description can stay empty. 

Let's say we have called our field : "URL"

Once saved, we will see a new URL field in our user's profile edit page.

...

2. Adding the HTML in the user's profile header

Now, from you child theme : woffice-child/functions.php file, you can add the following function:

function wofficeCustomIcon(){
    // We get the value from the current user : 
    global $bp;
    $member_id = $bp->displayed_user->id;
    $field_value   = xprofile_get_field_data('URL', $member_id);
    // We check whether it's empty or not : 
    if(!empty($field_value)){
        // We display it : 
        echo'<a href="'.esc_url($field_value) .'"  title="'.__('SEO Title','woffice').'" target="_blank">';
            echo'<i class="fa fa-link"></i>';
        echo'</a>';
    }
}
add_action('woffice_after_member_icons', 'wofficeCustomIcon');

Few notes: 

• URL in xprofile_get_field_data('URL', $member_id); 

...

• needs to be changed with your own field's name from step 1
• fa-link is what creates the icon, you can pick up one of the 650+ icons available

...

• at http://fontawesome.io/icons/
• woffice_after_member_icons is a Woffice action to output our custom code, if you want to add your icon at the beginning use: woffice_before_member_icons