Author Topic: Menu question and suggestion  (Read 1424 times)

Offline rumen

  • Posts: 399
Menu question and suggestion
« on: March 16, 2018, 11:29:00 AM »
I would like to ask about the menus where there is an image or icon. Like this one:



Is it possible to add one simple field in the back end where is defined the menu - I mean here:



with simple code editing like "Image":

Code: [Select]
<img src="images/monitor.png" alt="">
And get the icon / image of the menu?

May it is imposible, maybe it is very hard to be done I don't know, I'm not coder ... so just asking.

regards,

Rumen 



Offline astricia

  • Posts: 701
  • Gender: Female
    • netSchmiede24
Re: Menu question and suggestion
« Reply #2 on: March 16, 2018, 12:05:30 PM »
I would do download Font Awesome, install it and then use it in the menu.

Astricia

Offline rumen

  • Posts: 399
Re: Menu question and suggestion
« Reply #3 on: March 16, 2018, 12:27:37 PM »
"Search" is your Friend  :-D
https://forum.WebsiteBaker.org/index.php/topic,29329.msg205637.html#msg205637
https://forum.WebsiteBaker.org/index.php/topic,22657.msg152733.html#msg152733
and more .....

MfG. Evaki

I always try to search first and not to duplicate other posts. 

I saw that posts, but ... this is not a general solution, it is custom solution - case by case.

Offline dbs

  • Betatester
  • **
  • Posts: 8035
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Menu question and suggestion
« Reply #4 on: March 16, 2018, 01:08:52 PM »
If you have a id or class for every menu item it should possible to work with pseudoclass :before to add a Font Awesome icon.

Offline rumen

  • Posts: 399
Re: Menu question and suggestion
« Reply #5 on: March 16, 2018, 03:30:22 PM »
OK here is a real example (but because it is not defined as separate field it doesn't work very well)

The input:



And the result:




Offline dbs

  • Betatester
  • **
  • Posts: 8035
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Menu question and suggestion
« Reply #6 on: March 16, 2018, 03:45:42 PM »
My intension was to add class/id with page_id to show_menu2.
Next steps would be done in CSS.

Example in show_menu2 call:
... <a class="pid[page_id]" ...

and in CSS:
.pid23:before {content: '\f0e0'; font-family: 'FontAwesome'; font-size: 18px; font-color: yellow}

read more:
https://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content
http://astronautweb.co/snippet/font-awesome/

Offline evaki

  • Posts: 2749
Re: Menu question and suggestion
« Reply #7 on: March 16, 2018, 03:57:39 PM »
Meine "soeben mal" testweise ausgeführte  (für mehr habe ich im Moment leider keine Zeit)

Code: [Select]
SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
}
    In diesem Falle für jede Seite ein entsprechendes
selbstgemachtes Icon.

MfG. Evaki[/list]

Offline evaki

  • Posts: 2749
Re: Menu question and suggestion
« Reply #8 on: March 16, 2018, 04:41:01 PM »
My "just now" test (unfortunately I don't have time for more at the moment)
Code: [Select]
SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
}SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
}
In this case for each individual page a corresponding self-made icon.
MfG. Evaki
(irgendwie ist heute der wurm drin -netzstörungen)

 

postern-length