ucla/mwf — Issue #51: CSS for Menu Items with Icons or Thumbnail support
Author: zkhalapyan
Created: 2012-01-04 22:22:36+00:00
State: open

I am trying to add a menu item with an icon on it's left to the bottom of a standard text only menu, but the current support for embedding icons or thumbnails within menu items needs a more efficient and simpler solution.

Seems like the front page icon-menu solution is a bit of a hack : adding .menu-front class to the container menu, and hard-wiring various size icons to the background of the menu link items.

Wouldn't it be better to use an tag within the menu item's tag and encapsulate the CSS properties into a .menu-icon-item class that will correctly shift the text to the right in order to allow space for the icon? This will allow mixed types of menu items within a single menu.

Also is it a feasible solution to require a size restriction on icon and thumbnail images to be used within menu items? See below example:

Icons: 16x16 (px)
Thumbnails: 80x80 (px)