Social media links
- Thread starter OBXKH
- Start date
- Joined
- Nov 24, 2022
- Messages
- 13
- Reaction score
- 2
Could you be more precise how you would like to look like?please see
Code:https://atlantabg.org/
how can i code a similar footer's social media links?
thank you
- Joined
- Mar 11, 2022
- Messages
- 227
- Reaction score
- 32
Include Awsome Fonts within head and add css
In your footerelement try something like:
There is the fiddle. Open it up and click on run to see results
https://jsfiddle.net/f5gyxwbq/
Code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a.social{position:relative; text-decoration:none; display:inline-block; margin:8px; border-radius:50px; width:50px; height:50px; text-align:center; line-height:50px; font-size:30px; background-color:white; color:black; box-sizing:border-box; transition:all 1s;}
a.social:hover{color:blue; background-color:#cccccc;}
</style>
</head>In your footerelement try something like:
Code:
<a href="mysocialmedialink.net" target="_blank" class="social"><span class="fa fa-instagram"></span></a><a href="mysocialmedialink2.net" target="_blank" class="social"><span class="fa fa-flickr"></span></a><a href="mysocialmedialink3.net" target="_blank" class="social"><span class="fa fa-tumblr-square"></span></a><a href="mysocialmedialink4.net" target="_blank" class="social"><span class=" fa fa-skype"></span></a><a href="mysocialmedialink5.net" target="_blank" class="social"><span class="fa fa-facebook-official"></span></a>There is the fiddle. Open it up and click on run to see results
https://jsfiddle.net/f5gyxwbq/
Last edited:
MANY THANKS!
on my way!
please see
you can see i tweaked the code
can not seem to insert other Font Awesome icons
for example <i class="fa-brands fa-twitter"></i>
all i get is a small rectangle to the right
this happens everytime i insert a new icon
how do i code as many font awesome icons as i please?
on my way!
please see
Code:
https://codepen.io/Pavel_NA/pen/dyjoLJGyou can see i tweaked the code
can not seem to insert other Font Awesome icons
for example <i class="fa-brands fa-twitter"></i>
all i get is a small rectangle to the right
this happens everytime i insert a new icon
how do i code as many font awesome icons as i please?
- Joined
- Mar 11, 2022
- Messages
- 227
- Reaction score
- 32
Code:
<span class="fa fa-twitter"></span>fa-brands is not included in the free version.
So if that happens any time, i would guess there is some autokey activated???. Check that. skip fa-brands. Icons start with a fa (as you did) followed by fa-iconkey (iconkey = for example twitter)
To show as many as possible, you may google for a list of it. I don't have it in my brain. There is to many. I have to look up for myself any time i need one.
- Joined
- Nov 23, 2022
- Messages
- 15
- Reaction score
- 0
I am sharing responsive footer with social media links.
<footer class="social-footer">
<div class="social-footer-left">
<a href="#"><img class="logo" src="#website link "></a>
</div>
<div class="social-footer-icons">
<ul class="menu simple">
<li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>
<footer class="social-footer">
<div class="social-footer-left">
<a href="#"><img class="logo" src="#website link "></a>
</div>
<div class="social-footer-icons">
<ul class="menu simple">
<li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>