Utilizing Font Awesome Issue

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! 

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?

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

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?

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!

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

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

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!

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

On 9/20/2021 at 3:26 PM, Patterson said:

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

Perfect, thank you!