From: Alex Scott <codetheorist@gmail.com>
Date: Mon, 3 Jul 2017 18:15:44 +0000 (+0000)
Subject: Update menu docs to specify adding '.icons' class as well as layout-specific class.
X-Git-Tag: v6.4.2-rc2~1^2~38^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0dcb54f81f1ac46e975d3bb058dc8fe3266b4fe3;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 e73b36743..ef4778353 100644
--- 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>