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

Utilizing Font Awesome Issue


Patterson

Question

Site URL: https://flamingo-goby-tkw6.squarespace.com/

Hello!

I am trying to utilize font awesome icons on my site specifically on buttons. I have done this before with no issues, and even on this site! But now for some reason I cannot get them to work. I have added my kit code into the header, however when I insert the html prior to the button text (<i class="far fa-clipboard"></i>) I get a bunch of jumbled up characters.

 

Any help with this would be greatly appreciated. The site I am trying to implement this on is https://flamingo-goby-tkw6.squarespace.com/
PW: home

Thanks! 

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 0
On 9/10/2021 at 12:45 AM, Patterson said:

Site URL: https://flamingo-goby-tkw6.squarespace.com/

Hello!

I am trying to utilize font awesome icons on my site specifically on buttons. I have done this before with no issues, and even on this site! But now for some reason I cannot get them to work. I have added my kit code into the header, however when I insert the html prior to the button text (<i class="far fa-clipboard"></i>) I get a bunch of jumbled up characters.

 

Any help with this would be greatly appreciated. The site I am trying to implement this on is https://flamingo-goby-tkw6.squarespace.com/
PW: home

Thanks! 

Hi,

Which button did you add the <i class.. code?

Did you add Fontawesome 4 or 5 or 6 version?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 9/11/2021 at 10:33 PM, tuanphan said:

Hi,

Which button did you add the <i class.. code?

Did you add Fontawesome 4 or 5 or 6 version?

@tuanphan

 

Howdy, I think it was 5. I have an array of button I wanted to add the icons too. That one particularly above was for the application button in the footer of the site.

 

Thanks

Link to comment
  • 0
On 9/14/2021 at 12:23 AM, Patterson said:

@tuanphan

 

Howdy, I think it was 5. I have an array of button I wanted to add the icons too. That one particularly above was for the application button in the footer of the site.

 

Thanks

You mean clock ion in Business Hours? It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
2 hours ago, tuanphan said:

You mean clock ion in Business Hours? It looks like you solved this?

No, I wanted icons on both buttons in the footer(& others). I have no luck getting it any buttons on my site after it had been working prior. I am honestly not sure what happened.

Thanks!

Link to comment
  • 0
On 9/16/2021 at 11:37 AM, Patterson said:

No, I wanted icons on both buttons in the footer(& others). I have no luck getting it any buttons on my site after it had been working prior. I am honestly not sure what happened.

Thanks!

Hi,

I think buttons can't render html code in button text.

Try code, something like this (Design > Custom CSS)

div#block-yui_3_17_2_1_1629578448500_17982 a:before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    padding-right: 10px;
}

image.thumb.png.92f2c59f5d1ec46f25399b62dd66f4a7.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 9/19/2021 at 4:09 AM, tuanphan said:

Hi,

I think buttons can't render html code in button text.

Try code, something like this (Design > Custom CSS)

div#block-yui_3_17_2_1_1629578448500_17982 a:before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    padding-right: 10px;
}

image.thumb.png.92f2c59f5d1ec46f25399b62dd66f4a7.png

 

That is unfortunate, do you have any advice for alternatives to this as I would love to apply to them in the future with ease. Do you mind for now also providing the code for the clipboard I initially listed for the footer button to the left.

 

Thanks again!

Link to comment
  • 0

In above code

div#block-yui_3_17_2_1_1629578448500_17982 is block id

use this tool to find button block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours.

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