How to Add Font Awesome Icons to Squarespace

[@VictoriaClarkPiano]

Thanks Carl this is just what I needed in a short efficient video - thank you!

[@turnerkirk4600]

Great tutorial! Perfectly succinct and taught me all I needed to know!

[@IRREGOLARE123]

Thanks for the video! How do you center the icon within the div?

[@raphaelv.deanda7020]

Super Helpful!! Thank you so much

[@0xMedici]

Best simple explanation. Thanks

[@Carl_Johnson]

You're welcome!

[@dalejrfanfreak]

Huge help thank you Carl!

[@AthleticaHQ]

Brilliant - easy to follow! Cheers!!!! (subscribed)

[@Carl_Johnson]

Thanks Rob 👍👍

[@mercedesdelacierva4076]

Useful! thanks Carl

[@andrewphilip4963]

subscribed! I want the icon next to some text now, but it seems deform the whole page and changes font if i put it in the actual coding box. Think you can help?

[@Carl_Johnson]

Hi Andrew, could you send me a link to your site and I'll have a look?

[@dorcasbb]

Thank You So Much.

[@Blumahmedia]

HI Carl, I see a few people have asked the same thing and no answer. What do we do about putting icons next to the text, so it aligns with the start of the text? It seems impossible but I have seen other squarespace users have managed it.

[@Carl_Johnson]

Hi, could you email me at the email address in the About tab on my channel please? Just need to get more info, but I'll be able to help you out.

[@patrykstawarz5353]

Hey Carl is it possible to adjust the size of icons between different devices? For example when I want a smaller size of icons when I see my page on the phone.

[@Carl_Johnson]

Hi Patryk. Yes, you could put the same icons in in separate code blocks, so basically duplicating the icons that you're putting in then set the sizes differently using Font Awesome's fa-xx sizing property. Then you could hide the smaller ones on desktop and the bigger ones on mobile using media query. There's a section roughly 8 mins into this video that covers hiding and displaying various elements on mobile and desktop that might help - kzbin.info/www/bejne/n6bUdWp-hNKfsJY Let me know how you get on.

[@visalgunaratne2296]

Hi Carl, How do I move around the icon in the box? Like say I want to center it or align it to the right?

[@Carl_Johnson]

Hi Visal, If you copy the code below and put your Font Awesome code between the tags (outlined below) you can then change the 'center' value to either left or right to align it where you want. YOUR FA CODE HERE

[@visalgunaratne2296]

@@Carl_Johnson Thanks a lot mate! It worked!

[@Decatilinae]

super cool... Is Fontello the same way of doing as Fontawsome?

[@Carl_Johnson]

From what I can tell Fontello is sort of a library of free icons. I think each icon set is installed differently.

[@Decatilinae]

@@Carl_Johnson cool thanks... got it...

[@shafinahazman3217]

Hey, I followed the steps but seems like it didn't work. Is it because I'm using the 7.1 version?

[@goncalocarvalho6914]

Hi my friend! Can you tell me how can i align text next to the icon? because i find it impossible when u use a textbox next to it. Thank you so much :)

[@Carl_Johnson]

Hey Gonçalo. Thanks for the question. Could you share the URL of the page that you're having trouble with?

[@aabach-farm-alpakas1642]

Hi! Its super, but it doesnt work with Squarespace 7.1 in the Nav Titels. Do you have any Idea why?

[@Carl_Johnson]

Hi! A lot has changed since I released this video. Font Awesome's integration has been completely reinvented and Squarespace 7.1 is (ever so slightly) different. I do plan on updating some videos to reflect these changes and I think this will probably be one of them. Keep an eye out for an update!

[@aabach-farm-alpakas1642]

​@@Carl_Johnson that would be awesome! I start to regret the change to squarespace 7.1...

[@mrpeace7708]

making the size of it bigger didn't work for me. Please help?

[@Carl_Johnson]

Hi Mr Persevere. Can you share the code exactly how you've put it into the site please? ...and I'll take a look.

[@mrpeace7708]

Hey Carl. no worries...i've found a good guide here fontawesome.com/how-to-use/on-the-web/styling/sizing-icons cheers

[@bwolson]

how would I make the icon a clickable link?

[@bwolson]

Nevermind, I'm dense sometime - for anyone else looking for the solution: you need to wrap those elements in the anchor tag.. cheers!