johanhccs Posted March 11 Posted March 11 Hi, I would like to add different blocks of social links that have different URLs from the global social links on my site. https://hudcostreets.org/groups-preview Inside each of the yellow blocks should be a set of unique social links but I don't want to change the main site's. Any suggestions appreciated!
tuanphan Posted March 13 Posted March 13 We can do this with Code Block. Can you let me know which social icons you want to add? I can give you Code Block code 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!)
johanhccs Posted March 14 Author Posted March 14 On 3/13/2024 at 4:26 AM, tuanphan said: We can do this with Code Block. Can you let me know which social icons you want to add? I can give you Code Block code easier Thank you. The most common social icons will be: Facebook X (Twitter) Instagram TikTok YouTube
Solution tuanphan Posted March 16 Solution Posted March 16 On 3/15/2024 at 5:25 AM, johanhccs said: Thank you. The most common social icons will be: Facebook X (Twitter) Instagram TikTok YouTube You can add a Code Block > Paste this code. Replace example url with your social urls <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"> <!-- facebook --> <li> <a href="https://facebook.com"> <i class="fab fa-facebook-f"></i> </a> </li> <!-- Twitter --> <li> <a href="https://twitter.com"> <i class="fab fa-twitter"></i> </a> </li> <!-- instagram --> <li> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </li> <!-- Tiktok --> <li> <a href="https://tiktok.com"> <i class="fab fa-tiktok"></i> </a> </li> <!-- Youtube --> <li> <a href="https://youtube.com"> <i class="fab fa-youtube"></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; } </style> johanhccs 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment