Jump to content

How to add font icons in text block list

Recommended Posts

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? image.png.c592ac6a0a416857a6fd23f81b8d5a7d.png

<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 by JA-Build-Change-Impact
formatted code into code block
Link to comment
  • Replies 5
  • Views 808
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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

Link to comment

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>

image.thumb.png.e057028c5e72d7b1737793470e8b83c6.png

 

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

image.thumb.png.96ccd456766281574f8832096d7c98dd.png

Edited by tuanphan

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.