HMTL in header inconsistent across pages

Hello,

I’ve added social icons to the header (using the HTML component) and footer (in the “footer two” component) of my page.

But the icons are only visible on my homepage and one other page. On the rest, they are not visible. The links are still present if I hover though.

Also, every time I reopen the header HTML component, the code is not there. The field is empty –- even thought the icons are still visible on the homepage. This is a less urgent concern, because I shouldn’t have to mess with them much once they work everywhere.

Any suggestions?
Thanks.

This is what I’m working with:

<a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a><a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a>

/* Style all font awesome icons  for social */
.fa {
  padding: 5px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: .3;
	color: 157EC0;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  color: 157EC0;
}

/* Instagram */
.fa-instagram {
  color: 157EC0;
}

The page I need help with: [log in to see the link]