XF 1.3 Custom node icons using FontAwesome?

[rdn]

Did somebody already done this?
Please share your css codes.
Font Awesome 4.1.0 Icon, CSS Class, & Unicode - http://fortawesome.github.io/Font-Awesome/cheatsheet/
Thanks !

 

[Sheldon]

I've done it...

It's been a while since I have done it. Gimme a bit and I'll get back to you.

 

[rdn]

Great news, Thanks a lot!

 

[rdn]

Any news @Sheldon ?

 

[Russ]

You'll need to customize this but it's a start at least in the right direction

.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;
}

 

[Andy.N]

Can we differentiate between nodes that have unread messages and those without?

 

[Russ]

Can we differentiate between nodes that have unread messages and those without?

Where there's:

.forumNodeInfo

just add:

.forumNodeInfo.unread

 

[rdn]

You'll need to customize this but it's a start at least in the right direction

View attachment 74839

.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;

 

[Russ]

Doesn't need this CSS?

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

 

[rdn]

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; }