menu with fontawesome icons in typo3 - menu

Question

I try to implement an menu using fontawesome icons in typo3 8.7.13 .
My idea was to extend the table pages with the field tx_fontawesome_icon - no problem - it can be used in the page properties an is also saved in the database.
But how can I use it in the typoscript?
[ts]
lib.mainnav_mobile = HMENU
lib.mainnav_mobile {
wrap = <ul>|</ul>
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
wrapItemAndSub =<li>|</li>
stdWrap.wrap = <i class="fas fa-home fa-2x"></i>|
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
ATagParams = class="home-link"
}
}
}
[/ts]
Thanks
Volker

Answer 1

I assume you store the complete iconname in the field. If you might skip the prefix, build the prefix in your wrap.
Your attempt with .stdWrap would be possible so I would prefer the property for this: .before
You can use something like this (fill in the rest of the menu definition):
:
NO {
:
before.cObject = TEXT
before.cObject {
field = tx_fontawesome_icon
## have a default icon:
ifEmpty = fa_home
noTrimWrap = |<i class="fas | fa-2x"></i>|
# if you want the icon to be linked too:
typoLink.parameter.field = uid
}
}
use .noTrimWrap so you stay with the spaces before and after the icon-name.
If the icon should be inside of only one link, you need to add the icon to the item text (page title).
Therefor you use .stdWrap.wrap as you started. but you need to build the wrap from a cObject (see above) or use a datawrap:
:
NO {
:
stdWrap.dataWrap = <i class="fas {field:tx_fontawesome} fa-2x"></i>|
:
}

Answer 2

the solution for me is:
lib.mainnav_mobile = HMENU
lib.mainnav_mobile {
wrap = <ul>|</ul>
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
wrapItemAndSub =<li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = description // subtitle // title
ATagParams = class="home-link"
ATagBeforeWrap = 1
stdWrap.wrap.cObject = TEXT
stdWrap.wrap.cObject {
field = tx_fontawesome_icon
## have a default icon:
ifEmpty = fa-home
noTrimWrap = |<i class="fas | fa-2x"></i> |
}
}
Thanks for the help!
Volker