title: Use icons in Foundation 6 menus
body: <p>I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;FDashboard&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/app.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium"&gt;
        &lt;button class="menu-icon" type="button" data-toggle="responsive-menu"&gt;&lt;/button&gt;
        &lt;div class="title-bar-title"&gt;Menu&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="top-bar" id="responsive-menu"&gt;
        &lt;div class="top-bar-left"&gt;
          &lt;ul class="dropdown menu" data-dropdown-menu&gt;
            &lt;li class="menu-text"&gt;Site Title&lt;/li&gt;
            &lt;li class="has-submenu"&gt;
              &lt;a href="#0"&gt;One&lt;/a&gt;
              &lt;ul class="submenu menu vertical" data-submenu&gt;
                &lt;li&gt;&lt;a href="#0"&gt;One&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#0"&gt;Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#0"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#0"&gt;Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Three&lt;/span&gt; &lt;i class="fi-list"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="top-bar-right"&gt;
          &lt;ul class="menu"&gt;
            &lt;li&gt;&lt;input type="search" placeholder="Search"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;button type="button" class="button"&gt;Search&lt;/button&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="off-canvas-wrapper"&gt;
        &lt;button type="button" class="button" data-toggle="offCanvas"&gt;Open Menu&lt;/button&gt;
        &lt;div class="off-canvas position-left" id="offCanvas" data-off-canvas&gt;
  
          &lt;!-- Your menu or Off-canvas content goes here --&gt;
  
              &lt;!-- Menu --&gt;
          &lt;ul class="vertical menu icons icon-left"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fi-list"&gt;&lt;/i&gt; &lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fi-list"&gt;&lt;/i&gt; &lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fi-list"&gt;&lt;/i&gt; &lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fi-list"&gt;&lt;/i&gt; &lt;span&gt;Four&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;div class="off-canvas-content" data-off-canvas-content&gt;
          &lt;!-- Your page content lives here --&gt;
          &lt;div class="grid-container"&gt;
            &lt;div class="grid-x grid-padding-x"&gt;
              &lt;div class="large-12 cell"&gt;
                &lt;h1&gt;Welcome to Foundation&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/what-input/dist/what-input.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/foundation-sites/dist/js/foundation.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Adding the below lines to <code>app.scss</code> hasn't solved the problem:</p>
  
  <pre><code>@include menu-base;
  @include menu-expand;
  @include menu-align;
  @include menu-direction($dir);
  @include menu-icon-position;
  @include menu-icons;
  @include menu-icon-position;
  </code></pre>
  
  <p>What is wrong here ? Thank you!</p>