Custom CSS to display Register Helper checkbox fields as Font Awesome Icons on the Profile page.

custom_member_badges_fields.css

/* Custom CSS to pair with this recipe: https://gist.github.com/kimcoleman/391a537ffabf1d2f0c3027e988b291ea */
<style>
.pmpro_member_directory_php_developer,
.pmpro_member_directory_javascript_developer,
.pmpro_member_directory_mysql_developer {
    display: inline-block; 
    padding: 15px;
    font-size: 0;
}
.pmpro_member_directory_php_developer strong:after,
.pmpro_member_directory_javascript_developer strong:after,
.pmpro_member_directory_mysql_developer strong:after {
	font-weight: 700;
    font-size: 5rem;
}

.pmpro_member_directory_php_developer strong:after {
    content: "\f457";
    font-family: 'Font Awesome 5 Brands';
}
.pmpro_member_directory_javascript_developer strong:after {
    content: "\f3b8";
    font-family: 'Font Awesome 5 Brands';
}
.pmpro_member_directory_mysql_developer strong:after {
    content: "\f1c0";
    font-family: 'Font Awesome 5 Free';
}
</style>