Jump to content

Links in Code Block not appearing in Footer

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

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);
}

 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.