Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

Font Awesome Icons as Individual Node Icons 2.1

Updated and more in-depth tutorial

  1. XenForo Rocks
    Compatible XF Versions:
    • 1.0
    • 1.1
    • 1.2
    • 1.3
    • 1.4
    • 1.5
    Additional Requirements:
    Make sure you download the pack that is included in this resource.
    This is the up-to-date version on how to use font-awesome icons as node icons. Hope it's alright that I've taken this over since the other resource located here is unmaintained. I needed this recently so I felt it was important to keep it updated. Saves time for people like me whom still wanted this. The old unmaintained version did not have the latest icons in the pack. I'll keep the icons up to date.

    • Upload all files to your forum directory.
    When you've gone ahead and done that, you've done almost all of it. Next is ensuring that all your old node icons are gone.

    Find this in node_list.css and then delete it:

    Code:
    .node .forumNodeInfo .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            @property "nodeIconForum";
            background-image: url([email protected]/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/nodeIconForum";
        }
    
        .node .forumNodeInfo.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            @property "nodeIconForumUnread";
            background-image: url([email protected]/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: -36px 0;
            @property "/nodeIconForumUnread";
        }
    
        .node .pageNodeInfo .nodeIcon
        {
            @property "nodeIconPage";
            background-image: url([email protected]/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: -72px 0;
            @property "/nodeIconPage";
        }
    
        .node .linkNodeInfo .nodeIcon
        {
            @property "nodeIconLink";
            background-image: url([email protected]/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: -108px 0;
            @property "/nodeIconLink";
        }
    Great, you've pretty much done the hard bit. If you made a mistake just revert the template and try again.

    Next is going to your EXTRA.css and adding this depending on the type of node you are editing.

    Add this code before you do anything else. Do not delete anything else located in EXTRA.css just add it to the bottom under everything.

    Code:
    /* FONT AWESOME NODE ICONS */
    @font-face
    {
            font-family: 'FontAwesome';
            src: url('./styles/default/xenforo/fonts/fontawesome-webfont.eot');
            src: url('./styles/default/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
                    url('./styles/default/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
                    url('./styles/default/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
                    url('./styles/default/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
            font-style: normal;
            font-weight: normal;
    }
    
    .node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f0e6";
        padding: 4px;
    }
    
    .node.node_51 .forumNodeInfo.unread .nodeIcon:after, .node.node_51 .categoryForumNodeInfo.unread .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f0e6";
        padding: 4px;
    }
    
    /* FONT AWESOME NODE ICONS */
    Now! To get changing!

    For normal nodes use this code and change the number value in both .node sections to the node that you'd like to change. This includes pages.

    Code:
    .node.node_51 .pageNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f0e6";
        padding: 4px;
    }
    For links use this code:

    Code:
    .node.node_51 .linkNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f0e6";
        padding: 4px;
    }
    
    You can find all the icons at Font Awesome Icons and change the "content" value to the unicode of the icon you want. (you can find this by clicking the icon)

    Need additional support? PM me. I'll even do it for you if I've got time. No charge, and I don't want donations at all. Credit to the original maintainer.
    izrin96, HamoodDev, haHAA and 4 others like this.