Dalton Prock
Well-known member
This is explained within our FAQs section of our UI.X 2 documentation (How do I set new navigation icons?) but instead of using the Material icons format, use Font Awesome icons format.
UI.X 2 [Paid] 2025-03-05
- Thread starter ThemeHouse
- Start date
InsertUserNameHere
Member
@Dalton Prock
Just wanted to bring to your attention, font awesome icons do not work, also adding the stylesheet link in header_js global and switching icon font to "font-awesome" do not work as well.
Is icon font only for navigation, because it only seems to work for navigation not forum icons. The style sheet version for material design needs updating too, its at "4.95" and current version is "5.4.45."
Just wanted to bring to your attention, font awesome icons do not work, also adding the stylesheet link in header_js global and switching icon font to "font-awesome" do not work as well.
Is icon font only for navigation, because it only seems to work for navigation not forum icons. The style sheet version for material design needs updating too, its at "4.95" and current version is "5.4.45."
Dalton Prock
Well-known member
I just tested this on my demo board and it worked fine. I used the following format (fa fa-futbol) when inputting it within the node icons section (Forums -> Node layout and styling) of [TH] Nodes under the following fields: Forum icon class and Forum icon class (unread) with the icon font set to Font Awesome.
For navigation, I also tried it and it worked fine for me as well. I navigated to Setup -> Navigation -> Public navigation -> Edit any navigation link -> Under Extra attributes -> add "class" within the Name field and add the Font Awesome format to the Value field and save. It should then work after making those changes.
If it still doesn't work after trying what I mentioned above step-by-step, then let me know by quoting this response!
I'm making a note of this and will brief our team on it, thank you!
InsertUserNameHere
Member
Sorry Dalton, I should have been clear. Font awesome icons work on Nodes, but do not work on navigation. I didn't see any stylesheet references in header_js global.I just tested this on my demo board and it worked fine. I used the following format (fa fa-futbol) when inputting it within the node icons section (Forums -> Node layout and styling) of [TH] Nodes under the following fields: Forum icon class and Forum icon class (unread) with the icon font set to Font Awesome.
For navigation, I also tried it and it worked fine for me as well. I navigated to Setup -> Navigation -> Public navigation -> Edit any navigation link -> Under Extra attributes -> add "class" within the Name field and add the Font Awesome format to the Value field and save. It should then work after making those changes.
If it still doesn't work after trying what I mentioned above step-by-step, then let me know by quoting this response!
I'm making a note of this and will brief our team on it, thank you!
I was using far/fab font awesome icons. So, only fa fa is supported? Any chance of updating that?
Question, are Nodes affected by "icon font" under Style properties ->Icons?
I believe this could be a bug. When selecting font awesome, for example, as "icon font" under Style properties ->Icons it stops Material from appearing. But not the other way around if you had Font awesome selected as icon font!
Dalton Prock
Well-known member
I understand now although let's communicate further on this within the ticket you created
TheGroove
Well-known member
I'm having the exact same problem, is there a resolution for this? I've tried changing all the font sizes to rem in my default style but I don't have the custom "google fonts" property, could this be why?
Dalton Prock
Well-known member
Out of curiosity, are you making those changes on the child style that is currently active or not active?
TheGroove
Well-known member
I am attempting use this feature with my default style, it appears there as part of the framework I'm guessing. Does it need to be a child of this style?
Dalton Prock
Well-known member
If you mean you have the UIX style as a child of the XF default style, then yes, you will need to make the changes to the child style instead.
TheGroove
Well-known member
Okay great, thanks for that.
I am close to using this but have a couple of issues I'm unable to resolve and I'm hoping you can help with. The first is the header height, I am unable to figure out how to reduce it, it's taking up a lot of real estate. Also, I have these two broken back (buttons?) images.
The other is the height between the bottom of the header and the forum or post. Can I reduce that also?
Any assistance you can provide would be great.
Dalton Prock
Well-known member
Hello again
In order to change the header height, navigate to Appearance -> Header and navigation -> Header whitespace. The broken back buttons must be using Font Awesome icons by default. You'll need to add additional CSS to force it to use Material Icon font declaration and potentially specify a new icon within the content: property. Last but not least, to change the height between the bottom of the header, this can be partially be controlled by style properties depending on the areas. You can set the top padding of the titlebar area to something small (Navigate to Appearance -> Style Properties -> Global Settings -> Titlebar).
TheGroove
Well-known member
Okay, the only way I can get the header size to reduce is to remove the logo itself, even though the height of the logo is only 200px and I've set the white space to 0px, it still shows as I have it in the screenshot with all the extra padding.Hello again
In order to change the header height, navigate to Appearance -> Header and navigation -> Header whitespace. The broken back buttons must be using Font Awesome icons by default. You'll need to add additional CSS to force it to use Material Icon font declaration and potentially specify a new icon within the content: property. Last but not least, to change the height between the bottom of the header, this can be partially be controlled by style properties depending on the areas. You can set the top padding of the titlebar area to something small (Navigate to Appearance -> Style Properties -> Global Settings -> Titlebar).
I've dug around and do not exactly know what css to add to force the material icon, can you provide assistance with the exact code here? This seems like something that should work out of the box. Looking at your demo I don't see any "back" buttons in the header, let alone two of them like I have in mine.
Thanks for all your help.
Dalton Prock
Well-known member
Try to set it below 0px? Also, is an add-on generating those backlinks within your header? If so, could you let me know, please?
TheGroove
Well-known member
Great, the negative values work. I see the header is likely from an add-on as well. Thanks for your help, I think I'm good!
Dalton Prock
Well-known member
I'm glad to hear we could help! Enjoy UI.X 2!
InsertUserNameHere
Member
Quick question. Default avatars don't appear to be working for me, new and current users alike. Is there a setting I'm missing?
Default avatar type: Image
Default avatar image URL: styles/uix/images/default_avatar.png
Default avatar type: Image
Default avatar image URL: styles/uix/images/default_avatar.png
Dalton Prock
Well-known member
Should be able to set a default avatar image within Appearance -> Style Properties -> Avatars. Be sure you have it set for the child style(s) you are editing.
InsertUserNameHere
Member
That's where I set it, but it's not working. I was wondering if there are more settings besides; Default avatar type and Default avatar image URL.
Dalton Prock
Well-known member
Ah yes, navigate to Setup -> Options -> User options -> and untick " Enable dynamic default avatars". You should then see the default avatar image you set or have you already done that?
