How I added breadcrumbs to this site

There are a lot of really good resources to find when creating a web site with using a Genesis WordPress theme. The following is the code and sites I followed to create the breadcrumbs that I use on this site.

Here is code that I added to the child theme functions file:

/* Breadcrumbs
*************************/
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
 $args['home'] = 'Home';
 $args['sep'] = ' ';
 $args['list_sep'] = ', '; // Genesis 1.5 and later
 $args['prefix'] = '<div class="breadcrumb">';
 $args['suffix'] = '</div>';
 $args['heirarchial_attachments'] = true; // Genesis 1.5 and later
 $args['heirarchial_categories'] = true; // Genesis 1.5 and later
 $args['display'] = true;
 $args['labels']['prefix'] = ' ';
 $args['labels']['author'] = 'Archives for ';
 $args['labels']['category'] = 'Section for '; // Genesis 1.6 and later
 $args['labels']['tag'] = 'Archives for ';
 $args['labels']['date'] = 'Archives for ';
 $args['labels']['search'] = 'Search for ';
 $args['labels']['tax'] = 'Archives for ';
 $args['labels']['post_type'] = 'Archives for ';
 $args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later
return $args;
}

//* Replace breadcrumbs "Home" with Dashicons Home Icon
add_filter ( 'genesis_home_crumb', 'youruniqueprefix_breadcrumb_home_link' ); // Genesis >= 1.5
function youruniqueprefix_breadcrumb_home_link( $crumb ) {
 $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="dashicons dashicons-admin-home"></i></a>';
 return $crumb;
}

//* Loading Dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

In my style.css file I added the following code:

/* Breadcrumbs - Inspiration from: 
https://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
*/
/* Breadcrumb area */
.breadcrumb {
 display: box;
 overflow: hidden;
 border: 1px thin #ccc;
 /* box-shadow: 0 0 3px 1px #ccc; */
 border-radius: 7px;
 padding: 3px;
 line-height: 30px;
 margin: 7px 0 50px 0;
}

/* Dashicons css */
.dashicons-admin-home {
 padding: 4px 0 0 5px;
}

.dashicons-facebook,
.menu-item-2430,
.dashicons-facebook:hover{
 font-size: 25px;
 color: #fff;
 background: none !important;
}

/* Font awesome social icons */
#menu-item-2429 a:before{
 color: #fff;
 content: "\f082";
 font-family: FontAwesome;
 font-size: 22px;
 padding-right: 5px; 
}

/* Font awesome social icons */
#menu-item-2427 a:before{
 color: #fff;
 content: "\f082";
 font-size: 16px;
 font-family: FontAwesome;
 padding-right: 10px; 
}

/* Breadcrumb buttons */
.breadcrumb a {
 color: white;
 text-decoration: none;
 display: block;
 float: left;
 position: relative;
 line-height: 30px;
 padding: 0 19px 0 40px;
 background: #a3630e;
 border-radius: 4px;
 font-size: 0.85em; 
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
 padding-left: 10px;
 
}
.breadcrumb a:first-child:before {
 left: 14px;
}

.breadcrumb a:last-child {
 border-radius: 0 5px 5px 0; 
 margin-right: 25px;
}

/* hover/active styles */
.breadcrumb a.active, .breadcrumb a:hover{
 background: #f89a16;
}

.breadcrumb a.active:after, .breadcrumb a:hover:after {
 background: #f89a16;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
 content: '';
 position: absolute;
 top: 0; 
 right: -18px; /*half of square's length*/
 /*same dimension as the line-height of .breadcrumb a */
 width: 30px; 
 height: 30px;
 transform: scale(0.707) rotate(45deg);
 z-index: 1;
 background: #a3630e;
 /*stylish arrow design using box shadow*/
 box-shadow: 2px -2px 0 2px #fff, 3px -3px 0 2px #ccc;
 /* 5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows*/
 border-radius: 0 5px 0 50px;
 margin: 0 5px 1px 30px;
}

/*we dont need an arrow after the last link -- But I want it in anyway */
.breadcrumb a:last-child:after {
 content: ;
 box-shadow: 2px -4px 0 2px #fff, 3px -4px 0 2px #ccc;
 margin: 0 5px 1px 30px;
}

Inspiration:

https://clarknikdelpowell.com/blog/3-ways-to-use-icon-fonts-in-your-wordpress-theme-admin/
https://wpsites.net/web-design/change-breadcrumbs-in-genesis/

https://wpsites.net/web-design/adding-dashicons-in-wordpress/
https://melchoyce.github.io/dashicons/