Typo3-Menü mit font awesome icons

Question

Ich verwende Typoskript (neu dazu), um die Menüleiste für meine Website zu behandeln, und ich möchte fontawesome Symbole neben den Menüeinträgen verwenden.

Dies ist, was das Modell wie folgt aussehen:

Dies ist, wie mein Menü wie folgt aussehen:

Nun, mein TypoScript subpart für Menü sieht so aus:

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> 

        } 

Nun, mein Problem ist, dass ich nicht weiß, wie ich verschiedene Icons (die ich gewählt habe) mit verschiedenen Menüs (die in Level 1) verbinden kann. Wie Sie in Typoskript sehen, habe ich ein fa-Symbol verwendet, das aber für jeden Menüeintrag gleich ist (fa fa-plus). Irgendwelche Vorschläge?

Answer 1

Wenn Sie eine endliche Anzahl von Menüpunkten haben, können Sie Ihren Code ersetzen:

wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li> 

mit:

wrapItemAndSub = <li class="first icon1">|</li>|*|<li class="icon2">|</li>|*|<li class="icon3">|</li>|*|<li class="icon4">|</li>|*|<li class="last iconN">|</li> 

Um die Anzeige jedes Listenelement zu steuern.