XF 2.0 Using custom icons for node icons

chaot3ch

New member
Hey everyone, was having trouble finding out how to do this yesterday but I figured it out and figured I would post it here in case anyone else was having issues.

CSS:
// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

// Custome node icons for specific forums
// Replace the x after .node--id to correspond to the correct node ID you would like to make a custom icon for
.node--idx.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px -32px;
}
.node--idx.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px -32px;
}
 
Found this and it seems to work, somewhat...

Anybody know how to get this work with Google's Material Icons or FontAwesome? I have embedded the icon font in PAGE_CONTAINER and am using the following CSS:

CSS:
.node--id17.node-icon i {
    font-family: "Material Icons";
    content: "account_balance";
    color: #000;
    font-size: 5px;
}
But it does not work. It just appears blank on the node list.
 

AndyB

Well-known member
For FA add this to the extra.less template.

Code:
.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "\f085";
}
 

chaot3ch

New member
Found this and it seems to work, somewhat...

Anybody know how to get this work with Google's Material Icons or FontAwesome? I have embedded the icon font in PAGE_CONTAINER and am using the following CSS:

CSS:
.node--id17.node-icon i {
    font-family: "Material Icons";
    content: "account_balance";
    color: #000;
    font-size: 5px;
}
But it does not work. It just appears blank on the node list.
Sorry, just got around to looking into this.

You'll need to do two things. First add:
HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
I added this to PAGE_CONTAINER in the head section at the very bottom so it looks something like this:
HTML:
<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
    data-app="public"
    data-template="{$template}"
    data-container-key="{$containerKey}"
    data-content-key="{$contentKey}"
    data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
    data-cookie-prefix="{$xf.cookie.prefix}"
    class="has-no-js{{ $template ? ' template-' . $template : '' }}"
    {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
    
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <xf:set var="$siteName" value="{$xf.options.boardTitle}" />
    <xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
    <xf:set var="$description"><xf:description /></xf:set>

    <title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>

    <xf:foreach loop="$head" value="$headTag">
        {$headTag}
    </xf:foreach>

    <xf:if is="!$head.meta_site_name && $siteName is not empty">
        <xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
    </xf:if>
    <xf:if is="!$head.meta_type">
        <xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
    </xf:if>
    <xf:if is="!$head.meta_title">
        <xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
    </xf:if>
    <xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
        <xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
    </xf:if>
    <xf:if is="!$head.meta_share_url">
        <xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
    </xf:if>
    <xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
        <xf:macro template="metadata_macros" name="image_url"
            arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
            arg-output="{{ true }}" />
    </xf:if>

    <xf:if is="property('metaThemeColor')">
        <meta name="theme-color" content="{{ property('metaThemeColor') }}" />
    </xf:if>

    <xf:macro template="helper_js_global" name="head" arg-app="public" />

    <xf:if is="property('publicFaviconUrl')">
        <link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl')) }}" sizes="32x32" />
    </xf:if>
    <xf:if is="property('publicMetadataLogoUrl')">
        <link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
    </xf:if>
    <xf:include template="google_analytics" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>

Then after that you will need to add this into your extra.less:
CSS:
.node--forum .node-icon i:before{
    font-family: 'Material Icons';
    content: "\E84F";}
If you want to change this icon just get the unicode from google. So for example
<i class="material-icons">&#xE84F;</i>
The green highlight would be the unicode. Stick a \ before that and it will change the icon.

Hope this helps, if it doesn't work I'll try to go into more details.
 
This doesn't work for me. No matter what I replace the url or image path with, it just shows up blank. No image at all. It removes the default image, but adds nothing.

Had I know Xenforo 2 was going to be so troublesome, I would have never updated. It's made all of my convenient CSS work completely and totally useless and I'm livid.
 

chaot3ch

New member
This doesn't work for me. No matter what I replace the url or image path with, it just shows up blank. No image at all. It removes the default image, but adds nothing.

Had I know Xenforo 2 was going to be so troublesome, I would have never updated. It's made all of my convenient CSS work completely and totally useless and I'm livid.
Can you post the code you are using?
 
Can you post the code you are using?
Code:
// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
 

ozzy47

Well-known member
Code:
// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
Did you change this part, /path/to/your/custom_node_sprite.png?
 
Would it make a difference if I included the code with my images inserted? I have checked and unchecked everything I've done, and nothing is working for me. This was easy before I upgraded, I had code that worked. Now it doesn't anymore and Xenforo wants me to buy an add on to get a feature I had back BEFORE I paid 140 dollars to renew.
 

chaot3ch

New member
Would it make a difference if I included the code with my images inserted? I have checked and unchecked everything I've done, and nothing is working for me. This was easy before I upgraded, I had code that worked. Now it doesn't anymore and Xenforo wants me to buy an add on to get a feature I had back BEFORE I paid 140 dollars to renew.
Did you remove the code you were using before that changed the icons? Could there be a conflict occurring with old code still trying to change it, or have you removed everything that deals with icons from all of your custom templates? Is this a locally hosted file or is this a file you are hosting somewhere else?
 

tourmeister

Active member
For me to get this to work, I had to store the desired image in a folder outside of the /forums directory structure. I tried using,

/forums/src/customicons/newicon.gif
/public_html/forums/src/customicons/newicon.gif
/username/public_html/forums/src/customicons/newicon.gif
/home/username/public_html/forums/src/customicons/newicon.gif
http://192.254.136.227/forums/src/customicons/newicon.gif
http://192.254.136.227/home/username/public_html/forums/src/customicons/newicon.gif

and a few others as well, but none of those would work. So I moved the /customicons directory outsude of the /forums director and used this instead,

http://twtex.com/linkfiles/customicons/forum_old.gif

and that works.

The /linkfiles directory is at the same level as the /forums. Is there some kind of permissions setting I am missing if I want to keep the /customicons nested under the /forums directory structure? Does it matter if the forum is set to active or closed while I am testing this?

Note: I don't have the twtex.com domain pointing to the above IP address yet. When working on the new site, I edit my hosts file on my PC to include:

192.254.136.227 twtex.com

Right now the actual domain is still pointing to my live site. Would this affect it?
 

nocte

Well-known member
For me to get this to work, I had to store the desired image in a folder outside of the /forums directory structure. I tried using,
the src folder is not for public files. You should use the styles folder!

You should be able use a path relative to your forum root, e.g. styles/customicons/newicon.gif (no slash at the beginning).

/public_html/forums/src/customicons/newicon.gif
/username/public_html/forums/src/customicons/newicon.gif
/home/username/public_html/forums/src/customicons/newicon.gif
All of these can not work. These are no public paths.

This was easy before I upgraded, I had code that worked. Now it doesn't anymore and Xenforo wants me to buy an add on to get a feature I had back BEFORE I paid 140 dollars to renew.
Dis you read this? :rolleyes:
Note: add-ons and customizations made for XenForo 1.x will not be compatible with XenForo 2. If your site relies upon add-ons for essential functionality, ensure that a XenForo 2 version of the add-on is available before you start to upgrade. Style customizations will need to be redone and will not be maintained after the upgrade. We strongly recommend you make a backup before attempting an upgrade.
Source: https://xenforo.com/community/threads/xenforo-2-0-0-add-ons-released.137930/

This addon is free and works well: https://xenforo.com/community/resources/node-icon.6285/
 

tourmeister

Active member
the src folder is not for public files. You should use the styles folder!

You should be able use a path relative to your forum root, e.g. styles/customicons/newicon.gif (no slash at the beginning).


All of these can not work. These are no public paths.
I did not realize there were public/nonpublic paths. I am totally new to XF2 and coming from vB. So I've never dealt with this issue and did not see anything about it in the manual (or missed it, but I did read it). I moved the /customicons folder to the /styles folder and used the following,

styles/customicons/forum_old.gif

That worked! Thanks!

I did not see anything in this thread that indicated that the code in the original post was for anything other than XF2 and the thread has an XF2 prefix.

I did not see that. Thank you. Is there an advantage to using an add-on versus just entering code like what is shown in the original post? Does it keep things more orderly in terms of keeping track of mods?
 

chaot3ch

New member
I did not see anything in this thread that indicated that the code in the original post was for anything other than XF2 and the thread has an XF2 prefix.



I did not see that. Thank you. Is there an advantage to using an add-on versus just entering code like what is shown in the original post? Does it keep things more orderly in terms of keeping track of mods?
The code was indeed for xenforo 2.0 I believe he was making a reference to the last guy who was looking for help. People coming from 1.0 sometimes have trouble adapting to the new way 2.0 handles the code.

As for using the addons it just makes it easier to manage usually. Just upload the picture and tell it where you want it instead of having to write the code in yourself.
 

tourmeister

Active member
So I installed the add-on and that creates a new template.

I have never used Font Awesome or LESS, so I am not sure what I am looking at here. I don't see where I would put the link to my custom icon image file.

This is the template code

Code:
.node-icon-ext
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 46px;
    padding: @xf-paddingLarge 0 @xf-paddingLarge @xf-paddingLarge;

    i
    {
        display: block;
        line-height: 1.125;
        font-size: 32px;

        &:before
        {
            .m-faBase();

            color: @xf-nodeIconReadColor;
            text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);

            .node--unread &
            {
                opacity: 1;
                color: @xf-nodeIconUnreadColor;
                text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconUnreadColor, 50%), 50%);
            }
        }
    }
}

.subNodeLink-ext
{
    &:before
    {
        display: inline-block;
        .m-faBase();
        width: 1em;
        padding-right: .3em;
        text-decoration: none;

        color: @xf-nodeIconReadColor;
        text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
    }

    &:hover:before
    {
        text-decoration: none;
    }

    &.subNodeLink--unread
    {
        font-weight: @xf-fontWeightHeavy;

        &:before
        {
            color: @xf-nodeIconUnreadColor;
            text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconUnreadColor, 50%), 50%);
        }
    }
}

.subNodeMenu
{
    .subNodeLink-ext
    {
        display: block;
        padding: @xf-blockPaddingV @xf-blockPaddingH;
        text-decoration: none;
        cursor: pointer;

        &:hover
        {
            text-decoration: none;
            background: @xf-contentHighlightBg;
        }
    }
    
    li li .subNodeLink-ext { padding-left: 1.5em; }
    li li li .subNodeLink-ext { padding-left: 3em; }
    li li li li .subNodeLink-ext { padding-left: 4.5em; }
    li li li li li .subNodeLink-ext { padding-left: 6em; }
    li li li li li li .subNodeLink-ext { padding-left: 7.5em; }
}
 
Top