Typo3 menu with font awesome icons - menu

Question

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.
This is what the model look like:
This is how my menu look like:
Now, my typoscript subpart for menu looks this way:
SUBNAV = HMENU
SUBNAV {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
collapse = active
noBlur = 1
# Definition per page
# NO: default formatting
NO = 1
NO {
wrapItemAndSub = <li >|</li>
stdWrap.wrap = <i class="fa fa-plus"></i><span>|</span>
}
# ACT: User is on this or below this page
# Activate this state for this menu
ACT < .NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
CUR < .ACT
# try to check if submenu to add a arrow icon
IFSUB = 1
IFSUB{
wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ATagBeforeWrap = 1
stdWrap.wrap = <i class="fa fa-plus"></i><span>|</span>
}
ACTIFSUB = 1
ACTIFSUB < .ACT
ACTIFSUB.linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ACTIFSUB.ATagBeforeWrap = 1
CURIFSUB = 1
CURIFSUB < .ACTIFSUB
}
2= TMENU
2 {
expAll = 1
collapse = active
noBlur = 1
wrap = <ul class="treeview-menu">|</ul>
# Definition per page
# NO: default formatting
NO = 1
NO {
wrapItemAndSub = <li >|</li>
}
# ACT: User is on this or below this page
# Activate this state for this menu
ACT < .NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
CUR < .ACT
# try to check if submenu to add a arrow icon
IFSUB = 1
IFSUB{
wrapItemAndSub = <li class="first">|</li>|*|<li >|</li>|*|<li class="last">|</li>
linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ATagBeforeWrap = 1
}
ACTIFSUB = 1
ACTIFSUB < .ACT
ACTIFSUB.linkWrap = |<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
ACTIFSUB.ATagBeforeWrap = 1
CURIFSUB = 1
CURIFSUB < .ACTIFSUB
}
# Definition for pages on level 3 and lower
# Copy the definitions from level 2
3 < .2
# 3.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
4 < .2
# 4.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
5 < .2
# 5.wrap = <ul class="treeview-menu">|</ul>
# Copy the definitions from level 2
6 < .2
# 6.wrap = <ul class="treeview-menu">|</ul>
}
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?

Answer 1

If you have a finite number of menu items you can replace your code:
wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
With:
wrapItemAndSub = <li class="first icon1">|</li>|*|<li class="icon2">|</li>|*|<li class="icon3">|</li>|*|<li class="icon4">|</li>|*|<li class="last iconN">|</li>
To control the display of each list item.