Links in Code Block not appearing in Footer

Site URL: https://harpsichord-orca-lbed.squarespace.com/

I'm using a code block to display telephone number and email address icons and text in my footer.

I'd like for users to be able to click on the number and email address, so I've used an "a href" code to do this. But the text link doesn't appear. When I mouseover the area, the cursor changes to a hand to show that there's a link, but I don't see any text. When I remove the link, the text appears as normal.

I also have text links in a normal text block elsewhere on the footer and they appear normally.

I'm stumped and any help is appreciated!

Password to view the site: homegp

Here's the code I use. You can change up the colors to match your brand:

.code-block a {
       color: #ed834a;
    padding-bottom: .05em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(237,131,74,.3);
}

Perfect, thanks, Christy!

Hey Jun-Yi! How did you get your contact information in the footer of your site to have that little phone symbol and the envelope symbol? Also, how did you change the color of your phone number and email address in the footer? Thanks so much!

On 3/19/2021 at 5:25 AM, LindsayB said:

Hey Jun-Yi! How did you get your contact information in the footer of your site to have that little phone symbol and the envelope symbol? Also, how did you change the color of your phone number and email address in the footer? Thanks so much!

You can add a Code Block, paste this code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="tel:0123.456.789"><i class="fa fa-phone" aria-hidden="true"></i> Phone: 0123.456.789</a>
<a href="mailto:email@example.com"><i class="fa fa-envelope" aria-hidden="true"></i>Email: email@example.com</a>