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

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.png

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.
 

Jordyn

Formerly EvilSS
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

rfc0001

Well-known member
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;
}
No, I think that's about as simple as it gets - winner, winner, chicken dinner 🥇. Thanks! I owe you a beer.
 

Cannabis Ape

Active member
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;
}
This looks ugly AF!! :ROFLMAO:

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

f1.pngf2.png

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:

Jordyn

Formerly EvilSS
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;
}
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
 

Cannabis Ape

Active member
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
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.png
 

Cannabis Ape

Active member
Are you adding in the bottom center? Left or right? And just Twitter and FB?
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;
}
 

Jordyn

Formerly EvilSS
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.jpg
 

Cannabis Ape

Active member
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
Sweet! Didn't expect you would go all-out lol

Thanks a lot!
 

Cannabis Ape

Active member
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

Last edited:

Jordyn

Formerly EvilSS
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.jpg

xfdemo2.jpg
 
Last edited:

Cannabis Ape

Active member
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
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

Last edited:

Jordyn

Formerly EvilSS
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?
 

Cannabis Ape

Active member
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?
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

Jordyn

Formerly EvilSS
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.
 

Cannabis Ape

Active member
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.
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:
Top