2018 “The winner ain't the one with the fastest car, it's the one who refuses to lose.” 2018

Xenforo 1 - Font Awesome Node Icons

Thread starter #1

VIPR

Founder
Administrator
Messages
252
Ratings
131
Points
93
Best answers
0
PSN
VIP-Racing
Country
Australia
Offline
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;
}
 
Thread starter Similar threads Forum Replies Date
VIPR VIPR Multimedia 0
VIPR VIPR Multimedia 0

Similar threads

Top