WooCommerce: Replace Home in the Breadcrumbs with a FontAwesome icon - wordpress

Question

I'm trying to figure a way to use the home icon from FontAwesome in my breadcrumb trail for WooCommerce but it just shows up as a blank. Basically, I tweaked the code Woo provides to replace breadcrumb text with other text, but I guess it doesn't like HTML tags. This is my code.
add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
$defaults['home'] = '<i class="fas fa-home"></i>';
return $defaults;
}

Answer 1

The filter only allows you to change the text without adding HTML tags as the home delimiter is wrapped in esc_html(). Here's one solution. Change the filter to the following:
add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
$defaults['before'] = '<span class="nmr-crumb">';
$defaults['after'] = '</span>';
$defaults['home'] = ' ';
return $defaults;
}
Use a space inside the single quotes on the line with $defaults['home'] = ' ';
Next, you'll need to add the following to your theme style.css:
.woocommerce-breadcrumb .nmr-crumb:first-child a {
text-decoration: none;
}
.woocommerce-breadcrumb .nmr-crumb:first-child a::before {
font-family: FontAwesome;
content: '\f015';
}
Credit: https://wordpress.org/support/topic/swap-home-for-icon/

Answer 2

A less elegant solution would be to edit the breadcrumbs template file. You'll need to use a child theme and have an existing breadcrumbs template file under:
/woocommerce/global/breadcrumb.php
where / is your child theme folder. Inside breadcrumb.php find the following if statement:
if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
echo '' . esc_html( $crumb[0] ) . '';
} else {
echo esc_html( $crumb[0] );
}
change the above if statement to the following:
if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
if (0==$key){
echo '<i class="fas fa-home"></i>';
}else{
echo '' . esc_html( $crumb[0] ) . '';
}
}else{
echo esc_html($crumb[0]);
}
Here's a guide on how to edit WooCommerce template files.