Typo3 menu with font awesome icons

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 = |
                                    stdWrap.wrap = | 
                                }

                    # ACT: User is on this or below this page
                    # Activate this state for this menu
                                ACT < .NO
                                ACT {
                                    wrapItemAndSub = |
                                }
                                CUR < .ACT

                    # try to check if submenu to add a arrow icon                                   

                                IFSUB = 1
                                IFSUB{
                                    wrapItemAndSub = |
|*||
|*||
                                    linkWrap = |
                                    ATagBeforeWrap = 1
                                    stdWrap.wrap = |
                                }
                                ACTIFSUB = 1
                                ACTIFSUB < .ACT
                                ACTIFSUB.linkWrap = |
                                ACTIFSUB.ATagBeforeWrap = 1

                                CURIFSUB = 1
                                CURIFSUB < .ACTIFSUB

                            }


                            2= TMENU
                            2 {
                                expAll = 1
                                collapse = active
                                noBlur = 1
                                wrap = |
                    # Definition per page
                    # NO: default formatting                                    
                                NO = 1
                                NO {
                                    wrapItemAndSub = |
                                }

                    # ACT: User is on this or below this page
                    # Activate this state for this menu
                                ACT < .NO
                                ACT {
                                    wrapItemAndSub = |
                                }
                                CUR < .ACT

                    # try to check if submenu to add a arrow icon                                   

                                IFSUB = 1
                                IFSUB{
                                    wrapItemAndSub = |
|*||
|*||
                                    linkWrap = |
                                    ATagBeforeWrap = 1
                                }
                                ACTIFSUB = 1
                                ACTIFSUB < .ACT
                                ACTIFSUB.linkWrap = |
                                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 = |

                            # Copy the definitions from level 2
                                    4 < .2
                            #       4.wrap = |

                            # Copy the definitions from level 2
                                    5 < .2
                            #       5.wrap = |

                            # Copy the definitions from level 2
                                    6 < .2
                            #       6.wrap = |

                    }

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?

Typo3 menu with font awesome icons

Answers (1)

Related Questions