需要帮助编辑WordPress插件以动态显示用户社交媒体图标

Question

I'm editing a WordPress plugin named UsersWP. It's a plugin for users to create profiles and post content on the website. The plugin has some input form fields that I can drag and drop so that users can insert information and upload files.

The only problem is that it does not have input fields for users to enter their social media profile account links. The only way I can do that is by using a URL input field and give it a Font Awesome icon specific to that field from the Admin panel. But this method also returns the url string next to the icon on the front end. I don't want it to do that.

What I want is for the user to enter a link to their social media profile, insert that link into an anchor tag and return that as a clickable icon on the front end. The problem now is that I don't know how to return icon.

The script is below is from a different file named class-profile.php:

// URL
    if ($field->field_type == 'url' && !empty($value)) {
        $link_text = $value;
        // if deafult_value is not url then it will be used as link text. 
        if ($field->default_value && !empty($field->default_value) ) {
            if (substr( $field->default_value, 0, 4 ) === "http") {
                $link_text = $value;
            } else {
                $link_text = $field->default_value;
            }
        }
        if (substr( $link_text, 0, 4 ) === "http") {
            $link_text = esc_url($link_text);
        }

        $value = '<a href="'.$value.'">' . '<i class="uwp_field_icon ' . uwp_get_field_icon( $value ) . '"></i>' . '</a>';
    }

This one is from a file named fields.php:

function uwp_get_field_icon( $icon_value ) {
$field_icon = $icon_value;

if ( ! empty( $icon_value ) ) {
    if ( strpos( $icon_value, 'http' ) === 0 ) {
        $field_icon = ' '. $icon_value .' <span class="uwp_field_icon" style="background: url(' . $icon_value . ') no-repeat left center;padding-left:14px;background-size:100% auto;margin-right:5px"></span>';
    } else if ( strpos($icon_value, ' fa-') !== false ) {
        $field_icon = '<i class="uwp_field_icon ' . $icon_value . '"></i>';
    }
}

return apply_filters( 'uwp_get_field_icon', $field_icon, $icon_value );

}

And this is how it comes out in HTML form. 1

This should return an icon. How can I insert the Font Awesome icon class inside the i tag?