XF 2.0 Easiest way to put Facebook and Twitter link and icon in footer?

R

rfc0001

Well-known member
I am looking for a stupid simple way to put a link to Twitter and Facebook account along with their icons in my footer.

Something like on Xenforo Community:

1534540114402.webp

I'm sure this is easy to do with Font Awesome icons.

Does anyone have the HTML I would need to add to the Footer template to accomplish this? Thanks!

It would be great if this was a default XF feature - add site social media accounts to Board Info and it just gets added to the footer.
 
Sort by date Sort by votes
This is if you get desperate :D
Im so sure there's better ways than this lol.

In PAGE_CONTAINER template search:
Code: 
                    <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
                </ul>
Add below:
Code: 
<div class="socialfacebook">
<a href="https://www.facebook.com/">Facebook <i class="fa fa-facebook-square"></i></a>
</div>
<div class="socialtwitter">
<a href="https://www.twitter.com/">Twitter <i class="fa fa-twitter-square"></i></a>
</div>
Then add this to extra.less
Code: 
.socialfacebook {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 6px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.socialtwitter {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 2px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.fa-facebook-square {
font-size: 18px;
}
.fa-twitter-square {
font-size: 18px;
}
 

Attachments

  • funny.webp
    funny.webp
    3.5 KB · Views: 67
Upvote 0 Downvote
Jordyn said:
This is if you get desperate :D
Im so sure there's better ways than this lol.

In PAGE_CONTAINER template search:
Code: 
                    <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
                </ul>
Add below:
Code: 
<div class="socialfacebook">
<a href="https://www.facebook.com/">Facebook <i class="fa fa-facebook-square"></i></a>
</div>
<div class="socialtwitter">
<a href="https://www.twitter.com/">Twitter <i class="fa fa-twitter-square"></i></a>
</div>
Then add this to extra.less
Code: 
.socialfacebook {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 6px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.socialtwitter {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 2px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.fa-facebook-square {
font-size: 18px;
}
.fa-twitter-square {
font-size: 18px;
}
Click to expand...
No, I think that's about as simple as it gets - winner, winner, chicken dinner 🥇. Thanks! I owe you a beer.
 
Upvote 0 Downvote
Jordyn said:
This is if you get desperate :D
Im so sure there's better ways than this lol.

In PAGE_CONTAINER template search:
Code: 
                    <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
                </ul>
Add below:
Code: 
<div class="socialfacebook">
<a href="https://www.facebook.com/">Facebook <i class="fa fa-facebook-square"></i></a>
</div>
<div class="socialtwitter">
<a href="https://www.twitter.com/">Twitter <i class="fa fa-twitter-square"></i></a>
</div>
Then add this to extra.less
Code: 
.socialfacebook {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 6px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.socialtwitter {
font-size: 14px;
clear: right;
display: block;
float:right;
padding-right: 4px;
margin-top: 2px;
display: flex !important ;
flex-direction: column !important ;
align-items: center !important ;
justify-content: center !important ;
}
.fa-facebook-square {
font-size: 18px;
}
.fa-twitter-square {
font-size: 18px;
}
Click to expand...
This looks ugly AF!! :ROFLMAO:

HOWEVER!! Thanks to you I was able to shape it into my own style so thanks for that!

f1.webpf2.webp

Even made it change color with hovering gheghe but the code I wrote is probably a mess and I bet it could be shorter or something but it works lol.
Code: 
/*Social Footer Icons*/
.socialfacebook {
display: block;
padding-right: 4px;
margin-top: 6px;
display: flex !important ;
flex-direction: column !important ;
justify-content: center !important ;
}
.fa-facebook-square::before {
    font-size:40px
}
.fa-facebook-square:hover {
    color: #3b5998;
}
 
Last edited:
Upvote 0 Downvote
Cannabis Ape said:
This looks ugly AF!! :ROFLMAO:

HOWEVER!! Thanks to you I was able to shape it into my own style so thanks for that!

View attachment 183376View attachment 183377

Even made it change color with hovering gheghe but the code I wrote is probably a mess and I bet it could be shorter or something but it works lol.
Code: 
/*Social Footer Icons*/
.socialfacebook {
display: block;
padding-right: 4px;
margin-top: 6px;
display: flex !important ;
flex-direction: column !important ;
justify-content: center !important ;
}
.fa-facebook-square::before {
    font-size:40px
}
.fa-facebook-square:hover {
    color: #3b5998;
}
Click to expand...
Haha, thats what was requested man lol. I reckon i can add a nice looking set of social media follow us buttons which would look sweet in the middle bottom of the forum, but cheers mate :D
 
Upvote 0 Downvote
Jordyn said:
Haha, thats what was requested man lol. I reckon i can add a nice looking set of social media follow us buttons which would look sweet in the middle bottom of the forum, but cheers mate :D
Click to expand...
Well maybe you can help me :p

I've been trying to place FA icons next to eachother without success, I have broken the footer 6 different times now still don't get it lol.

I bet is a ffing simple HTML/CSS adjustment but I can only get them vertically :p

hor.webp
 
Upvote 0 Downvote
Jordyn said:
Are you adding in the bottom center? Left or right? And just Twitter and FB?
Click to expand...
I have a custom theme so it's in one of my footerblocks but haven't decided in which one I will end but for now it's in the left one.

Uhm, probably YT and IG will be added, alignment from Left to Right

This is the current CSS
Code: 
/*Social Footer Icons*/
.socialfacebook {
display: block;
padding-right: 4px;
margin-top: 6px;
display: flex ;
}
.fa-facebook-square::before {
    font-size:40px
}
.fa-facebook-square:hover {
    color: #3b5998;
}
.socialtwitter {
display: block;
padding-right: 4px;
margin-top: 2px;
display: flex !important ;
}
.fa-twitter-square {
font-size: 40px;
}
.fa-twitter-square:hover {
   color: #00aced;
}
 
Upvote 0 Downvote
Ok see how you go with this, i reckon you can make something of this.

This i mite call "Social Cons" :ROFLMAO:

Add where you want.
Code: 
<div class="socialcons">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>

extra.less
Code: 
.socialcons ul {
    overflow: auto;
}
.socialcons ul li {
    list-style-type: none;
    float: left;
}
.socialcons ul li a i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: none;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    padding-top: 15%;
}
.socialcons .fa-facebook {
    background:#3b5998
}
.socialcons .fa-twitter {
    background:#00aced
}
.socialcons .fa-youtube {
    background:#c33333
}
.socialcons .fa-instagram {
    background:#405de6
}
.socialcons ul li a i {
    transition: all 0.2s ease-in-out;
}
.socialcons ul li a i:hover {
    opacity: .7;
}

xfdemo1.webp
 
Upvote 0 Downvote
Jordyn said:
Ok see how you go with this, i reckon you can make something of this.

This i mite call "Social Cons" :ROFLMAO:

Add where you want.
Code: 
<div class="socialcons">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>

extra.less
Code: 
.socialcons ul {
    overflow: auto;
}
.socialcons ul li {
    list-style-type: none;
    float: left;
}
.socialcons ul li a i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: none;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    padding-top: 15%;
}
.socialcons .fa-facebook {
    background:#3b5998
}
.socialcons .fa-twitter {
    background:#00aced
}
.socialcons .fa-youtube {
    background:#c33333
}
.socialcons .fa-instagram {
    background:#405de6
}
.socialcons ul li a i {
    transition: all 0.2s ease-in-out;
}
.socialcons ul li a i:hover {
    opacity: .7;
}

View attachment 183382
Click to expand...
Sweet! Didn't expect you would go all-out lol

Thanks a lot!
 
Upvote 0 Downvote
Got 1 hick-up


For some reason that FB icon is on that position.

And after looking at it in the footer I do want them centered, got everything centered except these icons, how did you do that @Jordyn ?
 

Attachments

  • h2.webp
    h2.webp
    3.5 KB · Views: 59
Last edited:
Upvote 0 Downvote
Ok take 2 :p

I added this at the end of forum list.
Code: 
<div class="socialconstext">
<i class="fa fa-share"></i>&nbsp;Connect With Us?
</div>
<div class="socialcons"> 
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>


extra.less
Code: 
.socialconstext {
    display: flex;
    justify-content: center;
    font-family: Tahoma;
    font-size: 20px;
    text-transform: uppercase !important;
    font-weight: bold !important;
}
.socialcons {
    display: flex;
    justify-content: center;
    margin-right: 30px;
}
.socialcons ul {
    overflow: auto;
    justify-content: center;
}
.socialcons ul li {
    list-style-type: none;
    float: left;
}
.socialcons ul li a i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: none;
    font-size: 27px;
    text-align: center;
    margin-right: 5px;
    padding-top: 15%;
}
.socialcons .fa-facebook {
    background: #3b5998;
    font-size: 30px;
}
.socialcons .fa-twitter {
    background: #00aced;
}
.socialcons .fa-youtube {
    background: #c33333;
}
.socialcons .fa-instagram {
    background: #405de6;
}
.socialcons ul li a i {
    transition: all 0.2s ease-in-out;
}
.socialcons ul li a i:hover {
    opacity: .7;
}

xfdemo2-mobile.webp

xfdemo2.webp
 
Last edited:
Upvote 0 Downvote
Jordyn said:
Ok take 2 :p

I added this at the end of forum list.
Code: 
<div class="socialconstext">
<i class="fa fa-share"></i>&nbsp;Connect With Us?
</div>
<div class="socialcons">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>


extra.less
Code: 
.socialconstext {
    display: flex;
    justify-content: center;
    font-family: Tahoma;
    font-size: 20px;
    text-transform: uppercase !important;
    font-weight: bold !important;
}
.socialcons {
    display: flex;
    justify-content: center;
    margin-right: 30px;
}
.socialcons ul {
    overflow: auto;
    justify-content: center;
}
.socialcons ul li {
    list-style-type: none;
    float: left;
}
.socialcons ul li a i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: none;
    font-size: 27px;
    text-align: center;
    margin-right: 5px;
    padding-top: 15%;
}
.socialcons .fa-facebook {
    background: #3b5998;
    font-size: 30px;
}
.socialcons .fa-twitter {
    background: #00aced;
}
.socialcons .fa-youtube {
    background: #c33333;
}
.socialcons .fa-instagram {
    background: #405de6;
}
.socialcons ul li a i {
    transition: all 0.2s ease-in-out;
}
.socialcons ul li a i:hover {
    opacity: .7;
}

View attachment 183429

View attachment 183428
Click to expand...
Ok let me check gheghe,

Also used this in my wp footer :p besides the size show up differently it worked :)

I deleted the ease in stuff, hover is enough but it keeps showing the effect but the facebook icon is still on the same spot and the icons still not centered.

I'll mess around with it a bit to see what's up.

I think I will leave it alone for today, I'm in withdrawal and aggressive AF and I can't stand why A it's not centering the icons and B why the **** is that first icon action like that?

That being said, appreciate your effort :)
 

Attachments

  • wtf.webp
    wtf.webp
    4.4 KB · Views: 12
Last edited:
Upvote 0 Downvote
Cheers man. Yeah that FB icon is tripping me out. Does the FB icon look ok on your WP page?
Also try removing margin-right: 30px; and see if it moves more to the center.
Can you try putting the Twitter icon first, then FB? I wonder if we can fix it with a line height or something. :unsure:
Could try adding height: 40px; to .socialcons?
 
Upvote 0 Downvote
Jordyn said:
Cheers man. Yeah that FB icon is tripping me out. Does the FB icon look ok on your WP page?
Also try removing margin-right: 30px; and see if it moves more to the center.
Can you try putting the Twitter icon first, then FB? I wonder if we can fix it with a line height or something. :unsure:
Could try adding height: 40px; to .socialcons?
Click to expand...
I tried that but it lifts whatever Icon comes first.

Will mess this the px in a bit.

On WP it looks like this, had to make the icons biggers as there were too small and not in the middle but also they won't center.
 

Attachments

  • wp.webp
    wp.webp
    3.6 KB · Views: 28
Upvote 0 Downvote
Mess with the margin-right: 30px; until they're centered.
I have tried 4 different browsers and all are centered. Are you adding the icons code to a certain template? Or within a widget or built in style footer?
If i can add the code in the same spot as you would be good.
 
Upvote 0 Downvote
Jordyn said:
Mess with the margin-right: 30px; until they're centered.
I have tried 4 different browsers and all are centered. Are you adding the icons code to a certain template? Or within a widget or built in style footer?
If i can add the code in the same spot as you would be good.
Click to expand...
I placed it within a html widget

Fixed the issue on the forum.

Well, not me of course but @Russ from pixelexit who's theme I'm using.

I will paste his code here.


Footer icons:

2 things, change the css from:

Code: 
.socialcons ul li {
    list-style-type: none;
    float: left;
}
To:
Code: 
Copy Source
.socialcons ul li {
    float: none;
    display: inline-block;
    vertical-align: top;
}
And add this:
Code: 
.xb-footer .socialcons ul li:first-child a {
    padding-top: 12px !important;
}
Lastly remove:

margin-right: 30px; from .socialcons
 
Last edited:
Upvote 0 Downvote
Code: 
.socialcons {
    display: flex;
    justify-content: center;
    width: 50%;
      margin: 0 auto;
}
If you want to center the icons dress the div like this <div class="socialcons" style="width:100%;">
and use the code above in css.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

smitpau
  • Question Question
XF 2.2 Change Font Awesome Icon
Replies
2
Views
838
smitpau
smitpau
pateroosky
  • Question Question
XF 2.2 I need a navigation tab to do two things. Mainly open its link in a new window and second, preferably, the word Facebook be in a different color.
Replies
2
Views
186
pateroosky
pateroosky
oO5 Dynasty
  • Question Question
XF 2.2 Turned my logo into a font type, and wanted to implement it into xenforo.
Replies
3
Views
332
TPerry
TPerry
K
  • Suggestion Suggestion
Lack of interest Add link to Terms and rules to cookie consent layers
Replies
0
Views
452
Kirby
K
zoldos
  • Question Question
XF 2.2 weird icon next to "Home" in all breadcrumbs!!!
Replies
10
Views
661
Max Taxable
Max Taxable
Top Bottom