KipB

Hi, I created a custom codeblock to display an icon menu on my client's website, but for some reason when I copy the code into the Squarespace code block and save, the links aren't clickable, and just the icons display, but don't lead anywhere. I've tried testing in a new code block elsewhere on the page, and it seems like no <a> tags with an href inside of them, regardless of what is inside of the <a>, wether it is text or icon or photo. I've also tested my code in VScode and my browser and it displays and works perfectly fine..... IDK if this is a forum question or more of a Squarespace glitch, but here I am. Attached is a photo of the (unclickable) menu, as you can see, it displays fine. Below is my code: <script src="https://kit.fontawesome.com/227f70ae87.js" crossorigin="anonymous"></script> <ul class="t-social"> <!-- Apple Pod --> <li> <a href="https://podcasts.apple.com/us/podcast/the-managing-with-mind-and-heart-podcast/id1463442752" class="fa-solid fa-podcast"> </a> </li> <!-- Spotify --> <li> <a href="https://open.spotify.com/show/5tHe85vgYJ4Jd6yo7SE9oi" class="fa-brands fa-spotify"> </a> </li> <!-- Youtube --> <li> <a href="https://www.youtube.com/channel/UCkrJTszURtFU6l0nJak28CQ/videos" class="fa-brands fa-youtube"> </a> </li> <!-- Soundcloud --> <li> <a href="https://soundcloud.com/user-352787341" class="fa-brands fa-soundcloud"> </a> </li> </ul> <style> /* code block padding top bottom */ .code-block { padding-top: 2; padding-bottom: 2; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 15px; text-align: center; padding-left: 0; padding-bottom: 10px; } .t-social li { display: inline-block; margin: 0; line-height: 100%!important; } .t-social li a { font-size: 40px; margin: 0 20px; color: #479394; text-decoration: none; } </style>

Thank you @taunphan! Sorry it took me so long to get back into this and see your reply. The code you provided worked perfectly! Curious - could I change the height to 0px? Not that I really want to - but just wondered if that would be possible.

I'm also wanting to reduce the size (height primarily) of the code block. Here's a link to one of the pages I am working on. https://www.nashconsulting.com/workshops If someone can help me with the code and if I can add it Custom CSS so it works throughout the site? (I was able to do that with the spacer block height, I think). Thanks for your help!

I'm very new to Square Space and CSS, so my apologies for stupid questions. First when I put in the CSS I did get a "Syntax Error in Line 1" . Also I'm afraid I might have overwritten other code that I had there. Fortunately I had created a duplicate page. Does the code you're giving me relate to just the page that I'm working on or the whole site? Am I adding code below what ever code that is already there? I didn't do that and am hoping I just affected my duplicate page.

Site URL: https://www.nashconsulting.com/workshops Is it possible to have multiple buttons (used to navigate to anchors on the same page) floating as one scrolls down the page. The page I am working on is https://www.nashconsulting.com/workshops - would like to buttons on the right to float along as website visitor reads down the page. I realize I may need to change the position of the buttons or the format of the page as the buttons might obscure the text under them?

Site URL: https://www.nashconsulting.com/workshops I am wanting to put a hard return in the text of a single button. The particular button on the webpage url included here, is the second button in the first section on the right side. Managing Remotely (hard return/no line spacing) with Mind & Heart. I have added CSS so the buttons are all the same width on this page. I am new SquareSpace. Thanks for your help.