• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Font Awesome Icons as Individual Node Icons

Unmaintained Font Awesome Icons as Individual Node Icons 1.0.2

No permission to download
Compatible XF 1.x versions
1.0, 1.1, 1.2
So in this guide I will be showing how to use FontAwesome as Individual Node Icons.


1. Download the FontAwesomeFonts zip file, extract it, and upload to the root folder in your FTP.

2. Go to node_list.css and remove

Note: Don't remove the pages or link icons if you only want to use the icons for nodes. Or remove only pages if you don't want to use the Font Awesome icons for others and vice versa.

Code:
.node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
        background-image: url('@imagePath/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('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -36px 0;
        @property "/nodeIconForumUnread";
    }

    .node .pageNodeInfo .nodeIcon
    {
        @property "nodeIconPage";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -72px 0;
        @property "/nodeIconPage";
    }

    .node .linkNodeInfo .nodeIcon
    {
        @property "nodeIconLink";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -108px 0;
        @property "/nodeIconLink";
    }
3. Go to EXTRA.css and add this:
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 */
Replace the "51" with your node ID. You can also add/change the CSS to suit your needs.

Also, the "/f0e6" is the CSS code for the font awesome icon. Click the link at the top of this resource to find the codes for all the icons.

Here is the CSS for page and link node icons.

Pages:
Code:
.node.node_51 .pageNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}
Links:
Code:
.node.node_51 .linkNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}
So, thats it! All you need to add individual icons for nodes. :)

Please like and rate if you like this resource! :)

Please consider a donation.
Author
Matthew Hawley
Downloads
82
First release
Last update
Rating
5.00 star(s) 1 ratings

Latest updates

  1. Update 1.0.2

    Removed unnecessary tags.
  2. Update 1.0.1

    Fixed an error with one of the @font-face URLS. And removed unnecessary .unread tags in page and...

Latest reviews

Sick !
M
Matthew Hawley
Thanks. :)