mdemartin Posted August 29, 2022 Share Posted August 29, 2022 Site URL: https://imnworld.squarespace.com/artists/kathy-mattea I signed up with FontAwesome because I needed to have social media links for different pages. Can anyone help with the following: when I have more than five social media links, the sixth one goes to a second line. I would like to have these in just one line as there is plenty of room. Following is the page link, password and the code I am using. Thanks in advance. https://imnworld.squarespace.com/artists/kathy-mattea PASSWORD IS: password <script src="https://kit.fontawesome.com/29b7f821e9.js" crossorigin="anonymous"></script> <!-- OPTION 1: Icons in a link --> <ul class="t-social"> <li> <!-- put a unique class like "icon-link" on any link you are using an icon --> <a class="icon-link" href="https://www.mattea.com" target="_blank"> <i class="fa-solid fa-tv" title=""></i> </a> </li> <li> <a class="icon-link" href=https://open.spotify.com/artist/7ndzHjxbErIwvwnEUewMWe?si=vvjVwuSjQC-9PHUkC73lmA" target="_blank"> <i class="fa-brands fa-spotify" title=""></i> </a> </li> <li> <a class="icon-link" href="https://www.facebook.com/KathyMatteaMusic" target="_blank"> <i class="fa-brands fa-facebook-f" title=""></i> </a> </li> <li> <a class="icon-link" href="https://www.instagram.com/kathymattea" target="_blank"> <i class="fa-brands fa-instagram" title=""></i> </a> </li> <li> <a class="icon-link" href="https://twitter.com/Kathymattea09" target="_blank"> <i class="fa-brands fa-twitter" title=""></i> </a> </li> </li> <a class="icon-link" href="http://www.youtube.com/user/kathymattea" target="_blank"> <i class="fa-brands fa-youtube title="”></i> </a> </li> <li> </ul> <style> /* 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 .icon-link { font-size: 24px; /* change the font-size to change the icon size */ display: block; margin: 0 10px; /* increase/decrease the margin to adjust icon spacing */ color: #000000; } .t-social .icon-link:hover { color: #000000; } </style> Link to comment
tuanphan Posted August 30, 2022 Share Posted August 30, 2022 I see 6 icons same line here. Did you solve it? 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
mdemartin Posted August 30, 2022 Author Share Posted August 30, 2022 Yes I did - I had a little glitch before the YouTube icon. Thank you tuanphan. 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