Guest Posted June 9, 2013 Share Posted June 9, 2013 (edited) Is it possible to install or use Font Awesome on my Squarespace site? Edited November 26, 2014 by Guest Link to comment
Scoobie Posted August 25, 2014 Share Posted August 25, 2014 Yes, see this examplehttp://squarefront.com/addons/add-font-icons-to-a-squarespace-button-block Link to comment
cstine Posted November 26, 2014 Share Posted November 26, 2014 I am not using the Five template, does this work in other templates? Link to comment
kerstinmartin Posted March 3, 2015 Share Posted March 3, 2015 This post has gotten so many views but so far no comprehensive reply regarding the integration of font-awesome into a Squarespace website. Does anyone know how to do this and can explain it step by step? Or do you know of an article on the web somewhere that does this in relation to Squarespace? My own research has not come up with much unfortunately. Any pointers would be much appreciated! Thank you. Hi, I'm Kerstin! I offer business and marketing courses to help solopreneurs deepen their business skills and grow their confidence, audience, and revenue - without the hustle. 🎉 What kind of entrepreneur are you? → Take the quiz Link to comment
cstine Posted March 3, 2015 Share Posted March 3, 2015 (edited) Yes, I found out how to use it. Settings > Advanced > Code Injection Paste this code on the Code Injection page under HEADER: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">` Now you have installed Font Awesome on your site. You can now insert code (using a Code Block) on any of your pages to reference and use any of their icons (http://fortawesome.github.io/Font-Awesome/icons/) Example of individual code to insert in a Code Block for an icon: <i class="fa fa-envelope-o"></i> fa-envelope-o Hope this helps! Edited March 3, 2015 by cstine Link to comment
kerstinmartin Posted March 4, 2015 Share Posted March 4, 2015 Thank you Cstine! That's very helpful and I will check it out :) Hi, I'm Kerstin! I offer business and marketing courses to help solopreneurs deepen their business skills and grow their confidence, audience, and revenue - without the hustle. 🎉 What kind of entrepreneur are you? → Take the quiz Link to comment
Guest Posted March 4, 2015 Share Posted March 4, 2015 Just to throw something into the mix, I noticed the other day on the CSS window that the custom files says "Files and Fonts." Can you upload a .ttf file to make the font available on you site this way? Link to comment
neeklamy Posted March 5, 2015 Share Posted March 5, 2015 @cstine – I’ve formatted the code in your answer – the HTML was getting mangled by this site. To format code, just highlight the lines of code and use the 5th button in the toolbar: The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
CaseyH1570048191 Posted February 15, 2017 Share Posted February 15, 2017 Note that in @cstine's answer above, there's a stray back-tick (aka grave accent mark) at the end of the line of code. If you paste that character into the Code Injection box it can cause problems. Here's the code without that character for easy copy-pasta: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> I've also found that you can change the 4.2.0 numbers to a newer version of Font Awesome to access the new icons. E.G.: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> or <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> samkeen 1 Link to comment
CaseyH1570048191 Posted February 15, 2017 Share Posted February 15, 2017 Yes, it does. Link to comment
Millermore Posted June 14, 2017 Share Posted June 14, 2017 How can I add an icon to the description of a gallery image? When I enter in the HTML, it writes it out instead of turning the code into an image. The Gallery text areas don't have HTML enabled. Is there a way to enable HTML in those areas? Link to comment
CaseyH1570048191 Posted July 8, 2017 Share Posted July 8, 2017 No, unfortunately not. I've encountered that before: You can't add HTML to nav items on cover pages or into the name of a button for a lightbox form, either. Its just the way the system's put together. Link to comment
JessMelvi Posted March 29, 2018 Share Posted March 29, 2018 This is great, thanks!I noticed this while was poking around font awesome icons: https://fontawesome.com/how-to-use/svg-with-js"The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands." Looks like this is the new standard format (notice fas instead of fa: Link to comment
philip_pape Posted December 16, 2019 Share Posted December 16, 2019 Note that for newer versions of the FontAwesome CDN, the format is: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"> theresa.southern 1 Link to comment
theresa.southern Posted June 29, 2020 Share Posted June 29, 2020 @philip_pape THANK YOU!! I was going crazy trying to update it so I could use new icons 🙂 Link to comment
Spark_Plugin Posted November 29, 2021 Share Posted November 29, 2021 Hey everyone! I made a free guide on how to add Font Awesome to Squarespace, including a lot of different customization options. You can check out my Font Awesome guide here. tuanphan 1 - Rasmus Myhrberg, Founder of Spark Plugin Spark Plugin – The Ultimate Design Toolkit for Squarespace Link to comment
Abdul_Salphan Posted April 29, 2022 Share Posted April 29, 2022 Hi. I have added font awesome icons to the side and the icons appear on the site when in edit mode. But, the icons are not visible on the live site. Is this a common bug for all or am I doing something wrong? Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 On 4/29/2022 at 2:07 PM, Abdul_Salphan said: Hi. I have added font awesome icons to the side and the icons appear on the site when in edit mode. But, the icons are not visible on the live site. Is this a common bug for all or am I doing something wrong? What is your site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jessepacker Posted July 6, 2022 Share Posted July 6, 2022 On 5/1/2022 at 3:41 AM, tuanphan said: What is your site url? We can check easier @tuanphan — having the same issue. Site is jessepacker.com — the two icons should be visible as shown here (in edit mode) but when out of edit mode, don't show up. To be clear this is using CSS, not JS which ought to work, based on what I've read here and elsewhere. Link to comment
tuanphan Posted July 7, 2022 Share Posted July 7, 2022 8 hours ago, jessepacker said: @tuanphan — having the same issue. Site is jessepacker.com — the two icons should be visible as shown here (in edit mode) but when out of edit mode, don't show up. To be clear this is using CSS, not JS which ought to work, based on what I've read here and elsewhere. Try remove @import code, add this to Code Injection > Header <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> If the site is Personal plan, edit Site Footer > Add a Code Block > Paste this line <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> If it still doesn't work, keep the code & let me know. I will check it again jessepacker 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jessepacker Posted July 8, 2022 Share Posted July 8, 2022 On 7/6/2022 at 11:13 PM, tuanphan said: Try remove @import code, add this to Code Injection > Header <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> If the site is Personal plan, edit Site Footer > Add a Code Block > Paste this line <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> If it still doesn't work, keep the code & let me know. I will check it again The footer code block fix worked like a charm. Thanks, @tuanphan! Appreciate it. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment