How to add font icons in text block list

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>

Can you share link to WP site?

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

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

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. 

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