Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


treaves

Question

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
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

12 answers to this question

Recommended Posts

  • 0
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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

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
  • 0
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

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
  • 0
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

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
  • 0
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

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
  • 0
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

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

Create an account or sign in to comment

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


×
×
  • Create New...