1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained Font Awesome Icons as Individual Node Icons 1.0.2

The most "Awesome" guide around! ;)

  1. Matthew Hawley
    Compatible XF 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.
    Adam Howard and Veer like this.

Recent Updates

  1. Update 1.0.2
  2. Update 1.0.1

Recent Reviews

  1. sampick69
    sampick69
    5/5,
    Version: 1.0.0
    Sick !
    1. Matthew Hawley
      Author's Response
      Thanks. :)