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

[rfc0001]

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:



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.

 

[Hristo Avramov]

I actually completely did a make over to that code if you want a copy mate. Mine goes above copyright.

Yeah, if its shorter I want it

 

[Jordyn]

Yeah, if its shorter I want it

The Code? Oh, its not shorter lol.

 

[Hristo Avramov]

The Code? Oh, its not shorter lol.

Well, then probably is better if I stay on what I have, it works in all browsers

 

[Jordyn]

Well, then probably is better if I stay on what I have, it works in all browsers

Same mate. I guess it depends how many icons you want to add to how long the code is really. The code is set for 25 atm.

 

[MattRock]

Ok take 2

I added this at the end of forum list.

<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

.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

Wondering if someone might help here... I implemented the same exact code, but my icons aren't showing - any suggestions?

 

[Paul B]

You need to use the updated brand icon code - fab, not fa .

<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>

 

[MattRock]

You need to use the updated brand icon code - fab, not fa .

<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>

Thank you!