Alla7 Posted January 30 Posted January 30 Hello!) I have a question how to add 2 types of links per section? I have a trouble when I add them, bc I can use just the same social links on icons. Can you help me please?
tuanphan Posted February 1 Posted February 1 You need to use Code Block to achieve this. You can let me know which icon + url, I will give the code 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!)
Alla7 Posted February 2 Author Posted February 2 (edited) Thank you, Here is the website URL: https://fuchsia-circle-s8mg.squarespace.com/config/pages I have here 2 the same social links, but I need to add for other team member links: Instagram Tik Tok Website YouTube Email Edited February 2 by Alla7
tuanphan Posted February 5 Posted February 5 On 2/3/2024 at 6:31 AM, Alla7 said: Thank you, Here is the website URL: https://fuchsia-circle-s8mg.squarespace.com/config/pages I have here 2 the same social links, but I need to add for other team member links: Instagram Tik Tok Website YouTube Email What is password? 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!)
tuanphan Posted February 7 Posted February 7 On 2/6/2024 at 10:19 AM, Alla7 said: Sspace24 Which page you want to add this? I can't find any social icons on homepage https://fuchsia-circle-s8mg.squarespace.com/?noredirect 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!)
tuanphan Posted February 11 Posted February 11 You can add a Code Block in Tyler Stalman > Paste this code <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" /> <ul class="t-social"> <!-- instagram --> <li> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </li> <!-- Youtube --> <li> <a href="https://youtube.com"> <i class="fab fa-youtube"></i> </a> </li> <!-- Twitter --> <li> <a href="https://twitter.com"> <i class="fab fa-twitter"></i> </a> </li> <!-- Tiktok --> <li> <a href="https://tiktok.com"> <i class="fab fa-tiktok"></i> </a> </li> </ul> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 0; line-height: 100%!important; } .t-social li i { font-size: 30px; margin: 0 20px; color: white; } </style> Replace example Instagram, Tiktok, Twitter... with your new url 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!)
Alla7 Posted February 12 Author Posted February 12 Thank you so much! May I just double check - is it possible to add or change links with this code? If I`d like to add link to personal website, Pinterest, email or something else...
tuanphan Posted February 15 Posted February 15 (edited) Change link here to change icon, change it here to get Icon Code, access this site https://fontawesome.com/icons Edited February 15 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!)
wzrdofthestnk Posted February 22 Posted February 22 (edited) @tuanphan Can you add a website symbol please? NOTE: Fixed it with this line of code <i class="fa-solid fa-link"></i> Edited February 22 by wzrdofthestnk tuanphan 1
nb1212 Posted October 4 Posted October 4 thanks for the code! I want the linked website to open in a new tab, how do I change this in the code?
tuanphan Posted October 7 Posted October 7 On 10/5/2024 at 4:02 AM, nb1212 said: thanks for the code! I want the linked website to open in a new tab, how do I change this in the code? You can add target="_blank" with code like this <a href="https://twitter.com"> change it to <a href="https://twitter.com" target="_blank"> 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!)
sourabh123 Posted October 28 Posted October 28 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 5px; line-height: 100%!important; } .t-social .fa { font-size: 26px; margin: 0.8px; color: #8d8d8d; } .t-social .fa:hover {color:#4285f4;} </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> </head> <body> <ul class="t-social"> <!-- <li> <a href="#"> <i class="fa-brands fa-square-x-twitter fa-2xl"></i> </a> </li> --> <li> <a href="https://www.tiktok.com/@wonderlandsoftplaycentre" target="_blank"> <i class="fa-brands fa-tiktok fa-2xl"></i> </a> </li> <li> <a href="https://www.facebook.com/wonderlandplayexeter" target="_blank"> <i class="fa-brands fa-facebook fa-2xl"></i> </a> </li> <li> <a href="https://www.instagram.com/wonderlandsoftplaycentres/?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw%3D%3D" target="_blank"> <i class="fa-brands fa-square-instagram fa-2xl"></i> </a> </li> </ul> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </body> </html>
sourabh123 Posted October 28 Posted October 28 Just now, sourabh123 said: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 5px; line-height: 100%!important; } .t-social .fa { font-size: 26px; margin: 0.8px; color: #8d8d8d; } .t-social .fa:hover {color:#4285f4;} </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> </head> <body> <ul class="t-social"> <!-- <li> <a href="#"> <i class="fa-brands fa-square-x-twitter fa-2xl"></i> </a> </li> --> <li> <a href="https://www.tiktok.com/@wonderlandsoftplaycentre" target="_blank"> <i class="fa-brands fa-tiktok fa-2xl"></i> </a> </li> <li> <a href="https://www.facebook.com/wonderlandplayexeter" target="_blank"> <i class="fa-brands fa-facebook fa-2xl"></i> </a> </li> <li> <a href="https://www.instagram.com/wonderlandsoftplaycentres/?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw%3D%3D" target="_blank"> <i class="fa-brands fa-square-instagram fa-2xl"></i> </a> </li> </ul> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </body> </html> use this code for multiple social link in diffrent pages
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment