Update menu docs to specify adding '.icons' class as well as layout-specific class.

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index e73b36743634216f2a81cd8c60fb3048301fb85a..ef4778353e8c2994cb7a7be284b3683bdd89f962 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -294,18 +294,59 @@ Menu items can have icons. Wrap the text of the item in a `<span>`, and then add
 
 ---
 
-Add the class `.icon-top` to the Menu to orient icons above the text.
+Add the class `.icons` to the parent menu container to specify that the menu contains icons. Along with this, add your choice of layout class, such as `.icon-top`.
+
+When using any of the menu icon layout classes, ensure that the icon and the text are in the correct order. For `.icon-right` and `.icon-bottom`, the icon must come AFTER the text.
 
 <p>
   <a class="" data-open-video="10:42"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
+### Icon Top
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/codetheorist/pen/XgqMMe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="menu icons icon-top">
+  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
+</ul>
+```
+### Icon Right
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/codetheorist/pen/XgqMMe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
 
+```html_example
+<ul class="menu icons icon-right">
+  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
+</ul>
+```
+### Icon Bottom
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/codetheorist/pen/XgqMMe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="menu icons icon-bottom">
+  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
+</ul>
+```
+### Icon Left
 <div class="docs-codepen-container">
-  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/vmrYjN?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+  <a class="codepen-logo-link" href="https://codepen.io/codetheorist/pen/XgqMMe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
 ```html_example
-<ul class="menu icon-top">
+<ul class="menu icons icon-left">
   <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
   <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
   <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>