• 2018 “It doesn't matter whether you come in first, in the middle of the pack, or last. You can say, 'I have finished.' There is a lot of satisfaction in that.” 2018

This site is owned and third-party cookies. If you continue with us we understand that you accept the use of cookies.

  • #VIPR Australia's No.1 Sim Racing Forums

    Online Sim Racing Community for Australia, New Zealand and worldwide.
    Register Now!
  • Win Real Prizes at #VIPR

    Join a series or club event and win real prizes!
    Read More
  • Gaming Community

    Chat with other Gamers in our Gaming Discussion Forum!
    Join to Chat
  • Off-Topic Discussions

    Sign up and make new friends who share the same interests as you!
    Sign Up Here

Xenforo 1 - Font Awesome Node Icons

Discussion in 'VIPR Multimedia' started by VIPR, Mar 30, 2018.

  1. VIPR

    VIPR Founder Administrator

    128
    615
    93
    PSN:
    VIP-Racing
    Country:
    Australia
    This is a pretty simple way of adding font awesome icons as nodes.

    Screenshot-2018-3-30 Chat Site Forums(2).png

    Adding in your Extra.css

    This code removes old icon images:
    Code:
    #forums.nodeList .node .nodeIcon {
        background-image: none;
    }
    Still in Extra.css add this code. As you can see you can change colors, size etc.
    Code:
    .node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f0e6";
        color: rgb(77, 77, 77);
        position:relative;
        margin-left: -6px;
        top:-8px; 
    }
    
    .node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 34px;
        content: "\f086";
        color: rgb(211, 214, 215);
        position:relative;
        margin-left: -6px;
        top:-8px;
    }
    These next 2 codes are for your links and pages:
    Code:
    .node.node .linkNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 30px;
        content: "\f0c1";
        color: rgb(211, 214, 215);
        position:relative;
        margin-left: -3px;
        top:-6px;
    }
    
    .node .pageNodeInfo .nodeIcon:after
    {
        font-family: "FontAwesome";
        font-size: 30px;
        content: "\f15c";
        color: rgb(211, 214, 215);
        position:relative;
        margin-left: -3px;
        top:-6px;
    }
     
Loading...