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

XF 1.2 Help with node icons

Matthew Hawley

Well-known member
#1
I can't believe I'm asking this question... :p

So I'm trying to add font awesome to the node icons and im having trouble doing this.

For the code, all I see is this:
Code:
<span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
I'm trying to put this as the node icon:
Code:
<i class="icon-comments icon-large"></i>
Any suggestions? Thanks!
 
Last edited:

Russ

Well-known member
#3
This code is from our framework, we have an option if users want to enable it:

Code:
        <xen:if is="@xenBase_node_fontAwesome_icon">
           <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
             <i class="@xenBase_fontAwesome_nodeIcon @xenBase_fontAwesome_iconSize"></i>
           </span>
         <xen:else />
           <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
         </xen:if>
Then style properties controlling which fontawesome and which size.
 

Matthew Hawley

Well-known member
#5
This code is from our framework, we have an option if users want to enable it:

Code:
        <xen:if is="@xenBase_node_fontAwesome_icon">
           <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
             <i class="@xenBase_fontAwesome_nodeIcon @xenBase_fontAwesome_iconSize"></i>
           </span>
         <xen:else />
           <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
         </xen:if>
Then style properties controlling which fontawesome and which size.
Umm...where do I put this in node_forum_level_2?
 

Russ

Well-known member
#6
Umm...where do I put this in node_forum_level_2?
Yes, but you wouldn't of course copy that word for word as it uses our framework style properties, more just to get you an idea.

I also have a resource in regards to creating simple style properties if you need reference.
 

Matthew Hawley

Well-known member
#7
Yes, but you wouldn't of course copy that word for word as it uses our framework style properties, more just to get you an idea.

I also have a resource in regards to creating simple style properties if you need reference.
I replaced the node icon code with:
Code:
 <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
             <i class="icon-comments icon-3px"></i>
           </span>
And this came up

 

Russ

Well-known member
#8
I replaced the node icon code with:
Code:
<span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
             <i class="icon-comments icon-3px"></i>
           </span>
And this came up

Try this in extra:

Code:
.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon, .node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon, .node .linkNodeInfo .nodeIcon, .node .pageNodeInfo .nodeIcon
{
   background: none;
}
 

Russ

Well-known member
#12
The template is right, it's actually just CSS past that, I can get it for you. Again our template was simply a reference, you can't paste the entire contents of my code as we use it in our framework.

I'm away right now and will post later.