How to customize sidebar a bit more

Hi,

I’m trying to customize my sidebar a bit more. In sidebar.php (in my theme), there is:

<div id="secondary" class="widget-area well well-sm" role="complementary">
		<?php do_action( 'before_sidebar' ); ?>
		<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

			<aside id="search" class="widget widget_search">
				<?php get_search_form(); ?>
			</aside>

			<aside id="archives" class="widget">
				<h1 class="widget-title"><?php _e( 'Archives', 'upbootwp' ); ?></h1>
				<ul>
					<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
				</ul>
			</aside>

			<aside id="meta" class="widget">
				<h1 class="widget-title"><?php _e( 'Meta', 'upbootwp' ); ?></h1>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<?php wp_meta(); ?>
				</ul>
			</aside>

		<?php endif; // end sidebar widget area ?>
	</div><!-- #secondary -->

Thats fine – but it doesn’t show (I guess cos dynamic_sidebar is running). My question though – is how do I go about changing the HTML from that a bit? I need to do:

replace <ul> with <ul class="fa-ul"> , and also the
<li> elements to <li class="fa-li fa fa-check-square">. I kinda got started with what I found and tweaked:

add_filter( "get_archives_link", "customize_sidebar_li");

function customize_sidebar_li( $x ) {
	preg_replace('/\<ul\>/g', '<ul class="fa-ul">', $x);
	preg_replace('/\<li\>/g', '<li class="fa-li fa fa-check-square">', $x);
	return $x;
}

However, that only lets you edit the <li> elements, not the
<ul> as well. I would also need to run that on ALL the HTML from the sidebar. How would I go about this? I’m a bit of a novice with WP, so please ignore my ignorance ??

BTW – why is there no easy way to include HTML tags, without it breaking the post? The amount of effort it took to get them to show, was insane (not really helped by the lack of a “preview” too :()

TIA

Andy