Search…

X3 Photo Gallery Support Forums

Search…
 
rokudamerlin
Experienced
Topic Author
Posts: 161
Joined: 01 Dec 2012, 02:00

menu icon ?

25 Apr 2016, 06:29

hey karl ..

can i add in the menu points awesome icons ?

greez
VektorStyle.de
Graphic - Web - Printdesign | X3
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

25 Apr 2016, 09:47

rokudamerlin wrote:can i add in the menu points awesome icons ?
Unfortunately no. Html tags are stripped from the menu label, because they can interfere with the mega menu.

Perhaps I will add support for tags <i> and <strong>, so that you can add icons. This will not be available in the release this week, but perhaps the release after ...
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?  Topic is solved

07 Sep 2016, 12:46

Since X3 Release [0.19], you can now add icons to menu labels.

Example
Go to page details -> label, and add an with standard font-awesome html code:
Code
Label <i class="fa fa-link></i>
* You could of course add the icon before the text instead.

If you need more space between the label text and the icon, use &nbsp; (code for empty space):
Code
Label &nbsp;<i class="fa fa-link></i>
In the link below, you will find a list of available icons from font-awesome:
http://fontawesome.io/icons/
 
rokudamerlin
Experienced
Topic Author
Posts: 161
Joined: 01 Dec 2012, 02:00

Re: menu icon ?

02 Oct 2016, 05:58

you are the best !!!!! thanks
VektorStyle.de
Graphic - Web - Printdesign | X3
 
User avatar
mindsuk
Experienced
Posts: 31
Joined: 22 Feb 2010, 16:03

Re: menu icon ?

08 Dec 2016, 06:04

Hello Karl,

sounds good, but I miss some icons for my website. What about https://material.io/icons ?

greetings Tino
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

09 Dec 2016, 02:11

mindsuk wrote:sounds good, but I miss some icons for my website. What about https://material.io/icons ?
For now, Font Awesome icons are included in X3, but we will likely switch to material icons soon, because they are more modern and better designed. Until then, you can easily add material icons in X3, although that means your website is loading BOTH font-awesome and material icons.
  1. Go to settings -> custom -> header, and add this:
    Code
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  2. Include material icons like below, as explained in their docs:
    Code
    <i class="material-icons">face</i>
 
User avatar
mindsuk
Experienced
Posts: 31
Joined: 22 Feb 2010, 16:03

Re: menu icon ?

09 Dec 2016, 06:44

Thank you very much, Karl!!
 
MaciejK
Experienced
Posts: 41
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

19 Mar 2021, 13:39

Hi Karl
On my site kolasinski.art.pl
I'm trying to use Material icons in menu as instructed above with size modification:
Code
<i class="material-icons md-18">camera_alt</i>Galerie
but i'm getting strange results: when loading desktop site the screen is blank with background and share button only, but on iPad and iPhone i'm getting something like this:
Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

20 Mar 2021, 03:01

Well, first of all I see there is an error that occurs in the topbar because it's encountering some tags and attributes in mega titles. This error would not occur on mobile devices that don't use the topbar. First of all, you have stuff like this somewhere:
Code
<i class="material-icons md-18">camera_alt</i>
Which is getting injected into attributes causing problems with existing "quotes". You could try to use single-quotes:
Code
<i class='material-icons md-18'>camera_alt</i>
 
MaciejK
Experienced
Posts: 41
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

20 Mar 2021, 23:22

Ok Karl, that works

Now, how to:
1. Make the icon vertically mid align with text
2. Make the icon smaller?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

21 Mar 2021, 00:26

MaciejK wrote:1. Make the icon vertically mid align with text
2. Make the icon smaller?
Why use material icons in the first place when font awesome is already included? I mean md-18 refers to the size of the icon. You would have to start styling it by first adding your own class:
Code
<i class="material-icons md-18 myicon">camera_alt</i>
Then in Settings > Custom > Custom CSS, you can start adding styles with .myicon {...}. For instance try changing the font size, which will likely affect the icon size. Also, you could try different variations of "vertical-align".
 
MaciejK
Experienced
Posts: 41
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

21 Mar 2021, 06:06

Thank You Karl
The reason I want to use Material icons is that the set of icons is bigger from Awesome 4.7 and Awesome lacks icons I need or am I wrong?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12765
Joined: 30 Sep 2006, 03:37

Re: menu icon ?

21 Mar 2021, 07:00

MaciejK wrote:The reason I want to use Material icons is that the set of icons is bigger from Awesome 4.7 and Awesome lacks icons I need or am I wrong?
You are probably right, and material icons are better designed than Font awesome also. I am using material icons in Files app, and will probably use material icons in X4 also.

Just keep in mind, the reason they have md-18, is to keep icon at specific sizes so that it looks clear. This also means that the font will be larger than the font in your menu, and will therefore not align properly vertically ... With font-awesome, it would just inherit the font size. Therefore, as long as the icon is larger than the text, you will have challenges with vertical alignment and other positioning. You can probably tweak the positioning with CSS, but the icon and text won't align nicely by default because the icon is larger than the text.
 
MaciejK
Experienced
Posts: 41
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

21 Mar 2021, 07:24

Another option is to use latest collection of Awesome Pro which has enormous amount of icons for any use can be imagined.

I’ll try to style further icons so they align properly.

Thank You
 
MaciejK
Experienced
Posts: 41
Joined: 25 Jun 2017, 14:27

Re: menu icon ?

24 Mar 2021, 12:42

Hi Karl
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?

2. Also is there any way to use  Fontavesome vesion newer than 4.7?

Thanks in advance