Jump to content

Help with adding Font Awesome icons to contact page - nothing is working

Recommended Posts

Site URL: https://ultrashield-test-site.squarespace.com/

Hi there,

I tired following this tutorial to add to custom font awesome icons to a contact page for a client but it only lets me add the text without a hyperlink. I would like the text after each icon to be clickable so pasting the icon HTML code to a code block doesn't work.

Can anyone help me add 4 custom icons with clickable text next to them?

Thank you

 

Link to comment
  • Replies 14
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

11 minutes ago, treaves said:

Site URL: https://ultrashield-test-site.squarespace.com/

Hi there,

I tired following this tutorial to add to custom font awesome icons to a contact page for a client but it only lets me add the text without a hyperlink. I would like the text after each icon to be clickable so pasting the icon HTML code to a code block doesn't work.

Can anyone help me add 4 custom icons with clickable text next to them?

Thank you

 

What is the protected password of your site?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 10/7/2021 at 4:14 PM, treaves said:

Site URL: https://ultrashield-test-site.squarespace.com/

Hi there,

I tired following this tutorial to add to custom font awesome icons to a contact page for a client but it only lets me add the text without a hyperlink. I would like the text after each icon to be clickable so pasting the icon HTML code to a code block doesn't work.

Can anyone help me add 4 custom icons with clickable text next to them?

Thank you

 

Hi,

You mean 4 links: Find us, hello@... phone, follow us?

Is this right?

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
On 10/12/2021 at 2:15 PM, treaves said:

Business plan

Add this to Design > Custom CSS

div#block-yui_3_17_2_1_1633597051757_10442 a[href*="google.co"]:before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Pro";
    padding-right: 5px;
    font-weight: bold;
}

div#block-yui_3_17_2_1_1633597051757_10442 a[href*="mailto"]:before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Pro";
    padding-right: 5px;
}
div#block-yui_3_17_2_1_1633597051757_10442 a[href*="tel"]:before {
    content: "\f095";
    font-family: "Font Awesome 5 Pro";
    padding-right: 5px;
    font-weight: bold;
}
div#block-yui_3_17_2_1_1633597051757_10442 a[href*="facebook"]:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Pro";
    padding-right: 5px;
    font-weight: bold;
}

 

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
On 10/13/2021 at 3:09 PM, treaves said:

Thank you! They all worked perfectly except for the FB icon?

Screen Shot 2021-10-13 at 9.09.00 PM.png

Edit last FB code to this

div#block-yui_3_17_2_1_1633597051757_10442 a[href*="facebook"]:before {
    font-family: "Font Awesome 5 Brands";
    padding-right: 5px;
    visibility: visible;
    content: "\f082";
    font-weight: bold;
}

 

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
  • 2 weeks later...
On 10/18/2021 at 9:07 AM, treaves said:

Thank you! That worked perfectly 

On my laptop, I see this

You can add this to Design > Custom CSS to fix it

/* footer email-prevent wrap */
footer.sections [href*="mailto"] {
    white-space: nowrap;
}

ultrashield-test-site.squarespace.com-01-min.png

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
  • 1 year later...
20 hours ago, AliceBednarova said:

Hi @tuanphan, please could you let me know how to link awesome font icon and text (mail icon + email address) to an email? I am using personal plan. Thank you!!

What is your site url? And where is email? Header, footer or?

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.