This is example of multiple items menu navigation with 1 level submenu.
WP code supplies each menu item (actually li HTML tag) with the id, as soon as menu item is added to navigation via Dashboard-Menus. In example above, li tag ids are “menu-item-123″, “menu-item-147″ and so on.
In code above we styled an image icon both for desktops and retinas. To style li tag with icon we have to prepare a set of icon pngs (including @2x).
Simpler way, though, is to use icon font instead of images.
Sosa icon font uses for icons both uppercase and lowercase characters, therefore, it is important to style text-transform (if, say, your menu items anchors are defined as uppercase, naturally icons will inherit this style and you may get instead of desired pencil icon (a in lowercase) the undesired picture icon (A in uppercase).