XF 1.3 Custom node icons using FontAwesome?

Russ

Well-known member
#5
You'll need to customize this but it's a start at least in the right direction :)

Screenshot_3.png

Code:
.node .forumNodeInfo .nodeIcon:before
{
   display: inline-block;
   font-family: FontAwesome;
   color: @primaryDarker;
    font-size: 40px;
   line-height: 38px;
}
.node_2 .forumNodeInfo .nodeIcon:before
{
   content: "\f0cc";
}
.node_3 .forumNodeInfo .nodeIcon:before
{
   content: "\f121";
}
.node_4 .forumNodeInfo .nodeIcon:before
{
   content: "\f024";
}
.Responsive .node .nodeIcon
{
   background-image: none !important;
}
 

rdn

Well-known member
#8
You'll need to customize this but it's a start at least in the right direction :)

View attachment 74839

Code:
.node .forumNodeInfo .nodeIcon:before
{
   display: inline-block;
   font-family: FontAwesome;
   color: @primaryDarker;
    font-size: 40px;
   line-height: 38px;
}
.node_2 .forumNodeInfo .nodeIcon:before
{
   content: "\f0cc";
}
.node_3 .forumNodeInfo .nodeIcon:before
{
   content: "\f121";
}
.node_4 .forumNodeInfo .nodeIcon:before
{
   content: "\f024";
}
.Responsive .node .nodeIcon
{
   background-image: none !important;
}
Doesn't need this CSS?
vertical-align: middle;
 

rdn

Well-known member
#10
Probably better off just adjusting the margin-top on nodeicon.

And as mentioned: You'll need to customize this but it's a start at least in the right direction :)
Yes I have to add this :)
.node .nodeIcon { margin: 0px 0px 0px 10px !important; }
 
Top