Menu question and suggestion

[rumen]

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 

[evaki]

"Search" is your Friend 
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

[astricia]

I would do download Font Awesome, install it and then use it in the menu.

Astricia

[rumen]

"Search" is your Friend 
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.

[dbs]

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.

[rumen]

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:

[dbs]

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/

[evaki]

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]

[evaki]

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)