Node Icon

Node Icon 2.2 Beta 3

No permission to download
Overview Updates (9) Reviews (6) History Discussion
WeaponOwl updated Node Icon with a new update entry:

Image and custom icon fonts

Support for image/svg icons and custom html/font icons.
For custom iconic fonts you need have css styles for this font

Origin style example:
BdeDHxD.png
Custom xenforo style example:
VPrDMmk.png
Node edit:
cntLxb8.png
Click to expand...

Read the rest of this update entry...
 
Very very nice add-on! Any way it can have a read/unread icon as well? For whenever there is a read threads on a section and unread?
 
Couple issues with the latest update...

With this setting:
capture1.webp

Node Icon Shows Correctly in Node List:
capture2.webp

But does not show correctly in sub-forum list:
capture3.webp

And shows with a text shadow (making it inconsistent with existing icons) in the Forum List view:
capture4.webp

This is the css that automatically gets applied without admin input:
CSS: 
.node-icon-ext i:before {
    text-shadow: 1px 1px 0.5px rgba(26,117,181,0.5);
}
 
Maybe I should have explained it better. As per default by XF, it shows the colored/gray icon whenever there's a new reply within that section:

1566809731708.png

Can this be applied to this add-on as well? So you can choose which icons/image, etc to use for the (un)read sections. Unless of course the image can be automatically turned gray by a converter.
 
Skyrider said:
Maybe I should have explained it better. As per default by XF, it shows the colored/gray icon whenever there's a new reply within that section:

View attachment 209144

Can this be applied to this add-on as well? So you can choose which icons/image, etc to use for the (un)read sections. Unless of course the image can be automatically turned gray by a converter.
Click to expand...

This is how it works already (if using font awesome icons). You choose the icon within the add-on. Then XenForo still adjusts the color of it depending on if the forum contains unread threads/posts just as if it were the default Xenforo icon. The colors can be adjusted within the XenForo Style properties (see below).

capture1.jpg
 
Thanks for the reply, learned something new today! Though I'm not using font awesome icons! ^_^, using Image or Svg as node icon to use our own *.png image node icon. Hence it would be nice if this add-on can have its own read/unread node icon if images is being used.
 
Yeah, the read/unread coloring was a reason I went with font awesome, that and the fact they resize and typically load quicker and with less server resources than standard image files.

There are over 7,000 icons in the latest font awesome set available within XenForo you might find ones that work for you.
 
Been considering that, but with image you can use something customary. And granted, size would be a bit more but can be contained with compression/server caching.

@bzcomputers How exactly does fontawesome work? And with that, I mean where does it get the ID from? Within XF or the fontawesome website? Tried using <i class="fas fa-photo-video"></i> but for some reason that is the only one I can't get to work. As you mentioned

bzcomputers said:
within XenForo
Click to expand...

I assume XF keeps their own fontawesome database, which I think cannot be kept up-to-date with new ones being made.


Do you also have the ability to create your own fontawesome icons for the forums to use?
 
Last edited:
Skyrider said:
@bzcomputers How exactly does fontawesome work? And with that, I mean where does it get the ID from? Within XF or the fontawesome website? Tried using <i class="fas fa-photo-video"></i> but for some reason that is the only one I can't get to work. As you mentioned



I assume XF keeps their own fontawesome database, which I think cannot be kept up-to-date with new ones being made.


Do you also have the ability to create your own fontawesome icons for the forums to use?
Click to expand...
You should just need to select "Fontawesome based node icon" then enter:
Code: 
fa-photo-video

For some reason that one does not seem to work for me either.

I use this link to search for the font awesome icons I want: https://fontawesome.com/icons?d=gallery
 
I use the custom code function with fontawesome. Works the same from what I see :). But ya, I use the same website. So weird to see it doesn't work, unless of course XF has a fontawesome database on its own and that one just doesn't exist.
 
That's good to know, thanks!

Is this something we'd have to wait for XF to do, or can we by any chance do this ourselves as well?
 
Skyrider said:
Is this something we'd have to wait for XF to do, or can we by any chance do this ourselves as well?
Click to expand...
I would not recommend to try updating FA by yourself. I suppose we can expect an FA upgrade with the next XF version (2.1.4).
 
Skyrider said:
Can this be applied to this add-on as well? So you can choose which icons/image, etc to use for the (un)read sections. Unless of course the image can be automatically turned gray by a converter.
Click to expand...
Yes it change color of icon, bzcomputers show right place where colors defined, but it works with font-based only, like fontawesome, or else icons font you using. Key is font. With images another situation, for now there are no support by default for change icons/filters with unread messages inside. I just have no strong view how it might work in xf design, and making all possible situations is not my goal. By idea there might be no image icons for now, else you need use custom style. I said somewhere before, i did this addon for project i work with and change it only when i have tasks for change it. For this project no need have images as icons, at least for now. Images support is just side effect, and if you need have different image-based icons. Better write css rules for custom node icon type with image as background in :before and different image in .unread:before
Btw, you always can ask for example of how to do it
 
Last edited:
Very nice job!

Do you have any suggestions on how to easily change the padding for the node icon?

In my theme, the FA node icon is positioned much closer to the node title than the original ones.
 
Jon Snow said:
In my theme, the FA node icon is positioned much closer to the node title than the original ones.
Click to expand...
This does not appear to be the case with XenForo default theme, so it is likely additional padding of node icons used by your custom theme.

If you can't figure out how to match them, just post a link to your site (or message me the link) where the issue exists and I can most likely figure it out for you.
 
bzcomputers said:
This does not appear to be the case with XenForo default theme, so it is likely additional padding of node icons used by your custom theme.

If you can't figure out how to match them, just post a link to your site (or message me the link) where the issue exists and I can most likely figure it out for you.
Click to expand...

Thank you for the response!

You are indeed correct – I am using a different theme.

The wrong positioning can be seen in the forum category "Motor" here: https://tinyurl.com/y36n5p25
 
You must log in or register to reply here.

Similar threads

C
  • Question Question
XF 2.3 Node icons
Replies
1
Views
85
Jeremy P
Jeremy P
JoyFreak
  • Question Question
XF 2.3 Replacing node icons via css
Replies
15
Views
426
Wanji
Wanji
C
  • Solved
XF 2.2 Change Link Node Icon in CSS?
Replies
2
Views
497
CTS
C
quimerics
  • Question Question
XF 2.2 Icon in a node title
Replies
2
Views
216
quimerics
quimerics
MichaelCS
  • Question Question
XF 2.2 Trying to figure out how to restyle the NODE ICONs
Replies
4
Views
532
MichaelCS
MichaelCS
Top Bottom