XF 2.0 Using custom icons for node icons

chaot3ch

chaot3ch

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;
}
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
For FA add this to the extra.less template.

Code: 
.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "\f085";
}
 
Upvote 0 Downvote
StealthBravo said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
RebellionRoleplaying said:
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.
Click to expand...
Can you post the code you are using?
 
Upvote 0 Downvote
chaot3ch said:
Can you post the code you are using?
Click to expand...
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;
}
 
Upvote 0 Downvote
RebellionRoleplaying said:
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;
}
Click to expand...

Did you change this part, /path/to/your/custom_node_sprite.png?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
RebellionRoleplaying said:
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.
Click to expand...
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?
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
tourmeister said:
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,
Click to expand...
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).

tourmeister said:
/public_html/forums/src/customicons/newicon.gif
/username/public_html/forums/src/customicons/newicon.gif
/home/username/public_html/forums/src/customicons/newicon.gif
Click to expand...
All of these can not work. These are no public paths.

RebellionRoleplaying said:
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.
Click to expand...
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.
Click to expand...
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/
 
Upvote 0 Downvote
nocte said:
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.
Click to expand...

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!

Dis you read this? :rolleyes:

Source: https://xenforo.com/community/threads/xenforo-2-0-0-add-ons-released.137930/
Click to expand...

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.

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

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?
 
Upvote 0 Downvote
tourmeister said:
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?
Click to expand...
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.
 
Upvote 0 Downvote
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; }
}
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Fred.
  • Question Question
XF 2.3 How to add space after custom font awesome node icon?
Replies
2
Views
38
Fred.
Fred.
dabollicks
  • Solved
XF 2.3 Node icons
Replies
2
Views
312
dabollicks
dabollicks
C
  • Question Question
XF 2.3 Node icons
Replies
1
Views
231
Jeremy P
Jeremy P
C
  • Question Question
XF 2.3 Using SVG Node Icons...
Replies
1
Views
224
DeviateDefiant
DeviateDefiant
Deepblue
  • Question Question
XF 2.3 How to add images instead of sub node icons ? Read / unread both.
Replies
6
Views
123
Deepblue
Deepblue
Back
Top Bottom