cpotisch Posted January 13, 2020 Share Posted January 13, 2020 I'm trying to add icons to my nav, but I can't use code injection since I have the Personal plan. Everything I've seen says to use FontAwesome, and that requires code injection. Any way to do this? Thanks in advance. Link to comment
tuanphan Posted January 13, 2020 Share Posted January 13, 2020 If you use Personal Plan, you can import FontAwesome at Design > Custom CSS With Business Plan, use this (Code Injection Header) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> With Personal Plan, use this (Design > Custom CSS) @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); It will work, I just tested on my site. 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
cpotisch Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 15 hours ago, tuanphan said: If you use Personal Plan, you can import FontAwesome at Design > Custom CSS With Business Plan, use this (Code Injection Header) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> With Personal Plan, use this (Design > Custom CSS) @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); It will work, I just tested on my site. I added it to the CSS, but when I try to use an icon, it either just doesn't show up, or it displays a sort of "missing element" hollow square. Here's what I added to the page: Edited January 13, 2020 by cpotisch Link to comment
tuanphan Posted January 14, 2020 Share Posted January 14, 2020 8 hours ago, cpotisch said: I added it to the CSS, but when I try to use an icon, it either just doesn't show up, or it displays a sort of "missing element" hollow square. Here's what I added to the page: my code is FontAwesome 4.7 your code =fas fa-history is FontAwesome 5.x 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
cpotisch Posted January 14, 2020 Author Share Posted January 14, 2020 7 minutes ago, tuanphan said: my code is FontAwesome 4.7 your code =fas fa-history is FontAwesome 5.x So how can I deal with that? Also, is it not possible to choose the color with FontAwesome? Link to comment
tuanphan Posted January 14, 2020 Share Posted January 14, 2020 22 minutes ago, cpotisch said: So how can I deal with that? Also, is it not possible to choose the color with FontAwesome? https://fontawesome.com/v4.7.0/ you need to use CSS to change FA icon color. 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
cpotisch Posted January 14, 2020 Author Share Posted January 14, 2020 55 minutes ago, tuanphan said: https://fontawesome.com/v4.7.0/ you need to use CSS to change FA icon color. I'm not seeing much on how it works with CSS; only HTML. Can you point to where it explains this? And is it only for v4.7? Link to comment
tuanphan Posted January 14, 2020 Share Posted January 14, 2020 (edited) 10 minutes ago, cpotisch said: I'm not seeing much on how it works with CSS; only HTML. Can you point to where it explains this? And is it only for v4.7? an example <i class="fa fa-male" aria-hidden="true" style="color:red;"></i> Edited January 14, 2020 by tuanphan 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
cpotisch Posted January 14, 2020 Author Share Posted January 14, 2020 13 hours ago, tuanphan said: an example <i class="fa fa-male" aria-hidden="true" style="color:red;"></i> Sorry, I'm asking where it explains how to add FontAwesome (and preferably v5.x) to the site. I can't find any explanation that doesn't involve code injection. Thanks. Link to comment
fulamento Posted April 25, 2020 Share Posted April 25, 2020 Hi @tuanphan, I was wondering if you could confirm if Custom CSS allows to use Font Awesome 5 on a Personal plan. @import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css'); Icons appear when the Custom CSS page is opened (so when I'm loggedin to Squarespace) but icons do not appear when viewing the site. The same occurs when trying your code for Font Awesome 4. What do you think? Link to comment
SquareSpud Posted July 23, 2020 Share Posted July 23, 2020 I have the same question. If you have a personal plan and thus no access to code injection, is there another way use or add FontAwesome to your site? @tuanphan do you know? Thanks in advance. Link to comment
tuanphan Posted July 23, 2020 Share Posted July 23, 2020 @rwp Do you have an ideal? Thank you 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
rwp Posted July 23, 2020 Share Posted July 23, 2020 The only thing I can think of, if @import doesnt work, is to copy and paste the entire css file into design -> css. Link to comment
snavlakha Posted February 24, 2022 Share Posted February 24, 2022 I'm using this too on my website: https://www.polaritycode.com/ My question: Is it possible to update the code so that the icons are left justified (not centered)? Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/24/2022 at 7:50 PM, snavlakha said: I'm using this too on my website: https://www.polaritycode.com/ My question: Is it possible to update the code so that the icons are left justified (not centered)? It looks like you solved this? .t-social { display: flex !important; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment