Problems with subheader (show on frontpage and modifying)

Hi all!

I have this subheader:

<div id="subheader" class="clearfix">
		<div class="wrap">
			<?php
			$mediaphase_show_contacts = get_theme_mod( 'mediaphase_header_contacts_show', 'yes' );
			if ( $mediaphase_show_contacts === 'yes' ) : ?>
				<div class="contactdetails">
					<?php
					$mediaphase_contact_phone = get_theme_mod( 'mediaphase_header_contacts_phone' );
					if ( !empty( $mediaphase_contact_phone ) ) {
						echo '<span class="contact-phone"><i class="fa fa-phone-square"></i> ' . esc_html( $mediaphase_contact_phone ) . ' </span>';
					}
					$mediaphase_contact_email = get_theme_mod( 'mediaphase_header_contacts_email' );
					if ( !empty( $mediaphase_contact_email ) ) {
						echo '<span class="contact-email"><i class="fa fa-envelope"></i> ' . esc_html( $mediaphase_contact_email ) . ' </span>';
					}
					?>
				</div>

And would like to show it only on the front page of the site. I’m aware of <?php if( is_front_page() ) : ?> but since I haven’t edited php files before, I’m uncertain where to put what. I managed to crash the site a few times so I figured it’s better to ask!

Secondly, this subheader is editable in Customizer and by default, it would show contacts like mobile phone and email address. However, I would like to make these to boxes as links to my pages. In Customizer, I cannot add code like <a href="http://domain.com/wordpresstest/">Read more</a>, because for some reason, it shows it correctly in live preview (as a link), but when i go to the actual site, it’s not a link anymore, only text.

Is there an easy way out of this?

I’m truly thankful for any assistance,

– Bob