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

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

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?

ultrashield

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?

• Map icon: https://fontawesome.com/v5.15/icons/map-marker-alt
• email icon: https://fontawesome.com/v5.15/icons/envelope?style=regular
• Phone icon: https://fontawesome.com/v5.15/icons/phone?style=solid
• Facebook icon: https://fontawesome.com/v5.15/icons/facebook?style=brands

Is this right?

Yes that's right

Hi there, can anyone help me with this?

Thank you

10 hours ago, treaves said:

Hi there, can anyone help me with this?

Thank you

Hi. This site will use Personal or Business Plan? Each plan will needs a differrent cod

Business plan

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;
}

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

On 10/13/2021 at 3:09 PM, treaves said:

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

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;
}

Thank you! That worked perfectly 

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;
}

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!!

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?