Demo: Menu Title with Font Awesome icons

• Example CSS
• Example code
• Example HTML

Combining a menu title with Font Awesome icons. The icons stay vertically centered in their item, whether the menu has a title or not.

right click me (with title) right click me (no title)

Example CSS

Note the child combinator in > :first-child: the top margin is only meant for the first menu item, so that the title has room. Without it the rule also matches the <i> element that the plugin creates for a Font Awesome icon, and the label of an input item, since those are the first child of their own menu item.

Example code

Example HTML

<span class="context-menu-fa-title btn btn-neutral">right click me (with title)</span>

<span class="context-menu-fa-plain btn btn-neutral">right click me (no title)</span>