JA-Build-Change-Impact Posted June 27 Share Posted June 27 (edited) I am migrating a site from WP to SS. In footer on WP site (see image) I have some icons in front of a few lines of text. This is implemented via list formating (see CSS below). How do I apply this to text in a text block in a Squarespace site? <ul id="menu-footer-menu" class="menu menu-footer-widget"> <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211959"> (We typically respond within a few hours during normal business hours EST/EDT.) </li> <li id="" class="icon_chat_alt menu-item menu-item-type-custom menu-item-object-custom menu-item-211960"> <a href="https://www.tidiochat.com/chat/3uhh5runhddyp8ibkzhuzk1srmzmi53i">Live Chat <span class="menu-description"></span> </a> </li> <li id="" class="icon_mail_alt menu-item menu-item-type-post_type menu-item-object-page menu-item-211961"> <a href="mailto:hello@teachingideas4u.com?Subject=Customer%20Service%20Email%20via%20Website">Email Us</a> </li> <li id="" class="icon_lightbulb_alt menu-item menu-item-type-post_type menu-item-object-page menu-item-211962"> <a href="https://teachingideas4u.com/resource-request-form/">Teaching Resource Request</a> </li> <li id="" class="icon_contact_alt_custom menu-item menu-item-type-post_type menu-item-object-page menu-item-211963"> <a href="https://teachingideas4u.com/contact">Contact Info</a> </li> </ul> Edited June 27 by JA-Build-Change-Impact formatted code into code block Link to comment
tuanphan Posted June 27 Share Posted June 27 Can you share link to WP site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JA-Build-Change-Impact Posted June 27 Author Share Posted June 27 (edited) 24 minutes ago, tuanphan said: Can you share link to WP site? https://teachingideas4u.com P.S. here is SS access info: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723 Edited June 27 by JA-Build-Change-Impact added SS access info Link to comment
tuanphan Posted June 28 Share Posted June 28 15 hours ago, JA-Build-Change-Impact said: https://teachingideas4u.com P.S. here is SS access info: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723 The site use ETModules font, I can't find font library. You can consider using FontAwesome Live chat icon: https://fontawesome.com/search?q=message&o=r Email icon: https://fontawesome.com/search?q=envelope&o=r Lamp icon: https://fontawesome.com/search?q=idea&o=r Contact info icon: https://fontawesome.com/search?q=map maker&o=r If you agree, we will give quick guide to add FA icon Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JA-Build-Change-Impact Posted July 3 Author Share Posted July 3 Yes going with Font Awesome is good. Thanks. If you can provide the guide that would be great. I can then go back and select the design of the icon from the searches you provided. Link to comment
tuanphan Posted July 5 Share Posted July 5 (edited) First, add this to Code Injection > Header <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> Next, add a Markdown Block in Footer, enter these syntax (See this video) <i class="fa-sharp fa-solid fa-comment"></i> <a href="https://www.tidiochat.com/chat/3uhh5runhddyp8ibkzhuzk1srmzmi53i">Live chat</a> <i class="fa-regular fa-envelope"></i> <a href="mailto:hello@teachingideas4u.com">Email Us</a> <i class="fa-solid fa-lightbulb"></i> <a href="https://teachingideas4u.com/resource-request-form/">Teaching Resource Request</a> <i class="fa-solid fa-location-dot"></i> <a href="https://teachingideas4u.com/contact">Contact Info</a> If you need to reduce space between items, let me know, we can give the code If you need to change size, color, add animation effect, just choose these options Edited July 5 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment