title: Typo3 menu with font awesome icons
body: <p>I use typoscript (new to it) to handle the menu bar for my site and I want to use fontawesome icons next to the menu entries.</p>
  
  <p>This is what the model look like:</p>
  
  <p><a href="https://i.stack.imgur.com/H4B3m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H4B3m.png" alt="enter image description here"></a></p>
  
  <p>This is how my menu look like:</p>
  
  <p><a href="https://i.stack.imgur.com/2t6fy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2t6fy.png" alt="enter image description here"></a></p>
  
  <p>Now, my typoscript subpart for menu looks this way:</p>
  
  <pre><code>    SUBNAV = HMENU
      SUBNAV {
                              entryLevel = 0
                              1 = TMENU
                              1 {
                                  expAll = 1
                                  collapse = active
                                  noBlur = 1
  
                      # Definition per page
                      # NO: default formatting                                    
                                  NO = 1
                                  NO {
                                      wrapItemAndSub = &lt;li &gt;|&lt;/li&gt;
                                      stdWrap.wrap = &lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;span&gt;|&lt;/span&gt; 
                                  }
  
                      # ACT: User is on this or below this page
                      # Activate this state for this menu
                                  ACT &lt; .NO
                                  ACT {
                                      wrapItemAndSub = &lt;li class="active"&gt;|&lt;/li&gt;
                                  }
                                  CUR &lt; .ACT
  
                      # try to check if submenu to add a arrow icon                                   
  
                                  IFSUB = 1
                                  IFSUB{
                                      wrapItemAndSub = &lt;li class="first"&gt;|&lt;/li&gt;|*|&lt;li&gt;|&lt;/li&gt;|*|&lt;li class="last"&gt;|&lt;/li&gt;
                                      linkWrap = |&lt;span class="pull-right-container"&gt;&lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;&lt;/span&gt;
                                      ATagBeforeWrap = 1
                                      stdWrap.wrap = &lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;span&gt;|&lt;/span&gt;
                                  }
                                  ACTIFSUB = 1
                                  ACTIFSUB &lt; .ACT
                                  ACTIFSUB.linkWrap = |&lt;span class="pull-right-container"&gt;&lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;&lt;/span&gt;
                                  ACTIFSUB.ATagBeforeWrap = 1
  
                                  CURIFSUB = 1
                                  CURIFSUB &lt; .ACTIFSUB
  
                              }
  
  
                              2= TMENU
                              2 {
                                  expAll = 1
                                  collapse = active
                                  noBlur = 1
                                  wrap = &lt;ul class="treeview-menu"&gt;|&lt;/ul&gt;
                      # Definition per page
                      # NO: default formatting                                    
                                  NO = 1
                                  NO {
                                      wrapItemAndSub = &lt;li &gt;|&lt;/li&gt;
                                  }
  
                      # ACT: User is on this or below this page
                      # Activate this state for this menu
                                  ACT &lt; .NO
                                  ACT {
                                      wrapItemAndSub = &lt;li class="active"&gt;|&lt;/li&gt;
                                  }
                                  CUR &lt; .ACT
  
                      # try to check if submenu to add a arrow icon                                   
  
                                  IFSUB = 1
                                  IFSUB{
                                      wrapItemAndSub = &lt;li class="first"&gt;|&lt;/li&gt;|*|&lt;li  &gt;|&lt;/li&gt;|*|&lt;li class="last"&gt;|&lt;/li&gt;
                                      linkWrap = |&lt;span class="pull-right-container"&gt;&lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;&lt;/span&gt;
                                      ATagBeforeWrap = 1
                                  }
                                  ACTIFSUB = 1
                                  ACTIFSUB &lt; .ACT
                                  ACTIFSUB.linkWrap = |&lt;span class="pull-right-container"&gt;&lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;&lt;/span&gt;
                                  ACTIFSUB.ATagBeforeWrap = 1
  
                                  CURIFSUB = 1
                                  CURIFSUB &lt; .ACTIFSUB
  
                              }
  
  
                              # Definition for pages on level 3 and lower                                                                                 
                              # Copy the definitions from level 2 
                                      3 &lt; .2
                              #       3.wrap = &lt;ul class="treeview-menu"&gt;|&lt;/ul&gt;
  
                              # Copy the definitions from level 2
                                      4 &lt; .2
                              #       4.wrap = &lt;ul class="treeview-menu"&gt;|&lt;/ul&gt;
  
                              # Copy the definitions from level 2
                                      5 &lt; .2
                              #       5.wrap = &lt;ul class="treeview-menu"&gt;|&lt;/ul&gt;
  
                              # Copy the definitions from level 2
                                      6 &lt; .2
                              #       6.wrap = &lt;ul class="treeview-menu"&gt;|&lt;/ul&gt;
  
                      }
  </code></pre>
  
  <p>Now, my problem is I don't know how to associate different icons (which I chose) with different menus (the ones in level 1). As you see in typoscript, I used a fa icon but is same for every menu entry (fa fa-plus). 
  Any suggestions? </p>