Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

25 Mar 2021, 02:06

MaciejK wrote:1. I managed quite easily to style Material icons for my needs, but on pages with menu labels containing icons I'm getting wrong labels in page context e.g here http://kolasinski.art.pl/Galerie/Krajobraz/Morze/  should be "Morze" but i get sailingMorze so it looks like the label text is mixed with icon name.
Any solutions for that?
First of all, have you assigned "label" in page context instead of "title"? You want the icon to appear there also? It could be the title is stripping away the <i> tag. Try to use <span> instead of <i>? Or try to use double "quotes" instead of single "quotes"? You can also assign the page TITLE separately (it seems like you are using label). I need more info to understand exactly what's happening, or access to your panel.
MaciejK wrote:2. Also is there any way to use  Fontavesome vesion newer than 4.7?
You could add it yourself (like material). I'm not a fan of these font-icons any longer, for a few reasons:
  • The font library slows down loading and rendering, and you will only use 10% of the icons?
  • The icons look crisp and clear only at specific sizes (normally 24 px), and "fonts" cannot achieve this like SVG can.
  • As you can see in the new X3 popup, we now use pure SVG (also from material icons), because they look clear and professional, can be modified in real-time, and don't require loading icons that are not used.
  • In my opinion, icons don't provide any functional benefit alongside text in menu's and titles. In your case, they don't look too bad in the menu, because they are small, but I don't think it offers any true benefit.
I may not include font-icons in a future MAJOR release of X3/X4, and instead use better designed native SVG for in-app icons. It could be an []option, if the user wants to easily include icons for use in text/content, but I don't think it will be enabled by default. Considering this, I am no rush to update to a newer heavier version of font awesome, which will likely be replace/removed at some point in the future.
 
MaciejK
Experienced
Posts: 54
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

25 Mar 2021, 13:03

Hi Karl

Yes, I'm using Label, not the title as title is quite long and complex for SEO purposes.
No, i don't want the icon to appear on page itself, just pure text.
  • The font library slows down loading and rendering, and you will only use 10% of the icons?
  • The icons look crisp and clear only at specific sizes (normally 24 px), and "fonts" cannot achieve this like SVG can.
  • As you can see in the new X3 popup, we now use pure SVG (also from material icons), because they look clear and professional, can be modified in real-time, and don't require loading icons that are not used.
  • In my opinion, icons don't provide any functional benefit alongside text in menu's and titles. In your case, they don't look too bad in the menu, because they are small, but I don't think it offers any true benefit.
I agree that performance is most important and aware that using font libraries is not optimal.
Presence of icons in menu is up to individual aesthetic taste of course.

I was also thinking to use SVG icons as I can design them myself or take from limitless resources on internet, this is much better solution for me.

I see that menu label takes <img> tag, so usage of SVG icons is possible, but where should I place the icon files then how to code it in Label field to display properly?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

26 Mar 2021, 00:13

MaciejK wrote:Yes, I'm using Label, not the title as title is quite long and complex for SEO purposes.
Were you aware that there are SEO options under the main page tab? This allows you to assign the SEO <title> tag separately from the page title, which would then only be used for the human-visible page titles.
MaciejK wrote:No, i don't want the icon to appear on page itself, just pure text.
Then would this not be a good reason to use TITLE instead of LABEL, and then instead use SEO options (as mentioned above)? As long as you are adding icon tags to labels, and then displaying labels as the page title, the icon tag will obviously be part of the page title (working or not).
MaciejK wrote:I was also thinking to use SVG icons as I can design them myself or take from limitless resources on internet, this is much better solution for me.
That would be technically possible, but it would require a lot of effort, and doesn't really solve any "problems". My point about SVG being "better" is mainly because they are more clear, but only at specific larger sizes (definitely larger than your menu font). SVG icons will be even more difficult to vertically align with the text (because the icon is not a font that inherits the font size/style) ... At least when using a font-icon, it will somewhat automatically align with text color/size/style.

It's not a huge performance issue for a separate website like yours to include an icon font CSS. My comment was mainly from the perspective of X3 as a library that needs to be kept optimal, and where we only use some icons for interface elements.

I would definitely stick with a font icon CSS in your case, as the icons are used alongside text. SVG would take a lot of effort with minimal benefit. With SVG icons, I personally add them "inline" for maximum control and it doesn't require any "loading". For example in the X3 popup interface, the "next" (chevron) button:
Code
<svg viewBox="0 0 24 24">
  <path class="svg-path-chevron_right" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>
FYI, after clicking an icon on materialdesignicons.com, you can click the code-dropdown and "view SVG".
 
MaciejK
Experienced
Posts: 54
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

26 Mar 2021, 13:50

Thank You Karl

All noted and well understood. That’s all I need to know in this topic.