Social media icons

[Ehren]

All xenfocus styles come with built-in social media icons. To configure them, browse to Style Properties > Xenfocus: Social icons

You'll be presented with options for different locations which can be enabled or disabled.

At the bottom, a text box can be used to enter your social media links. The links must be placed inside an <li> tag, like so:

<li><a href='https://www.facebook.com/xenfocus' target='_blank'>Facebook</a></li>

If you'd simply like to show a logo instead of text, omit the text entirely like this:

<li><a href='https://www.facebook.com/xenfocus' target='_blank'></a></li>

Icons are automatically applied depending on the URL, so if the URL contains "facebook", the facebook icon will be shown. If your URL doesn't automatically create an appropriate icon, further css code may be required.


Adding your own social icons

If FontAwesome doesn't have an icon for your social media icon (such as Mastodon), you'll need to use an image icon instead. First, add your HTML code using the same method as above.

Next, add this to your extra.less file, replacing https://testing.com with your URL, and https://site.com/icon.png with the URL to your icon.

.xenfocus-social a[href="https://testing.com"]::before{
    background-image: url('https://site.com/icon.png');
    background-size: contain;
    content: '';
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
}

 

[Ambient Vibe]

Hi Ehren!

I am looking to add the Discord social icon to the bunch. How do I go about this?

 

[xTrisx]

Hi Ehren!

I am looking to add the Discord social icon to the bunch. How do I go about this?

I need this too.

 

[Ehren]

For discord, add the following to extra.less and upload the attached image to /styles/xenfocus/images/discord.png

.xenfocus-social a[href*="discordapp.com"]{
   background-color: #7289da;

   #XF &::before {
       background: url('styles/xenfocus/images/discord.png') no-repeat 50% 50%;
       background-size: 20px auto;
       font-size: 0;
   }
}

The image is below (barely visible) :

I'll update the theme files on my demo board and they'll automatically be patched for the next update.

 

[Chris Harris]

url may be discord.gg now

 

[omurcandursun]

I want change colour

but I want this

 

[Ehren]

I want change colour

Open the xenfocus_theme.less file and delete the following:

.xenfocus-social a:not(:hover){
    background-color: @xf-xenfocus_breadcrumb--background-color;
    background-image: @xf-xenfocus_breadcrumb--background-image;
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    backdrop-filter: blur(15px) saturate(130%);    
}

.xenfocus-social a:hover::after {
    background: none;
}

 

[Twisted_Pepper]

Hi Ehren,
The only issue so far I have found with this is Pinterest. If using .com it loads the 'P' logo fine, if using .co.uk it loads a generic share button.
Is that easy to rectify?
Many thanks!

 

[Ehren]

Hi Ehren,
The only issue so far I have found with this is Pinterest. If using .com it loads the 'P' logo fine, if using .co.uk it loads a generic share button.
Is that easy to rectify?
Many thanks!

Sorry about that. Add this to extra.less and I'll have it patched by default for the next update.

.xenfocus-social a[href*='pinterest.']{
    background: #cd1d1f;
    &:before{ content: "\f0d2"; }
}

 

[est3ban129]

How can I know the images there are ? for example, will the telegram icon appear ?

 

[Ehren]

How can I know the images there are ? for example, will the telegram icon appear ?

The icons are created using fontawesome. If you open the xenfocus_base.less file, you'll see a list of the supported social sites on line 2640. The telegram code starts on line 2743.

If you need to add your own, make sure the code is added to your extra.less file. The xenfocus_base.less file should never be modified.

 

[Abhean]

OK at wit's end. Attempting to put bluesky icon within the social media icons.

Social Icon Code:

<li><a href='https://bsky.app/profile/did:plc:oi4xpamxoz6lfavgv46mrylt/feed/aaafjicp6upmc' target='_blank'></a></li>

Attempting to place my own icon per the above:

.xenfocus-social a[href="https://bsky.app/profile/did:plc:oi4xpamxoz6lfavgv46mrylt/feed/aaafjicp6upmc"]::before{
    background-image: url('http://www.servicedogadvocate.com/images/bluesky.png');
    background-size: 1em auto;
    content: '';
    background-repeat: no-repeat;
    background-position: 50%;
}

Result is:

Should be


Still seeing the "*" (I think) in white

What am I doing wrong, or is there a different method with the newer releases?

 

[Footballguys Tech]

Hello @Ehren -- I'm running XenForo 2.3.4 and wanting to add a Tiktok social icon to my forums. I followed your instructions above and it's very close to working.

I downloaded the Tiktok SVG from Font Awesome, converted it to PNG, and saved it to my image hosting.

Then added this to Xenfocus: Social icons:
<li><a href='https://www.tiktok.com/@footballguysofficial' target='_blank'></a></li>

Then I added this to extra.less:

.xenfocus-social a[href="[URL]https://www.tiktok.com/@footballguysofficial[/URL]"]::before{
background-image: url('https://footballguys.imgix.net/forum-images/social/tiktok-icon.png');
background-size: 1em auto;
content: '';
background-repeat: no-repeat;
background-position: 50%;
}

So that background-image-url points to the Tiktok icon I created and posted.

I can see the Tiktok icon in the Social Icons now, but it appears behind the gray box/white asterisk text. Is there a way to remove the asterisk and bring the Tiktok icon to the foreground? Or maybe a different way to surface a Tiktok social icon if this is no longer the best way?

Thanks!

 

[Ehren]

Hi @Abhean and @Footballguys Tech

Xenforo adjusted the way icons are rendered in 2.3. I've just edited my first post with some new code which you should use instead