在 typo3 中带有 fontawesome 图标的菜单

Question

我尝试在 typo3 8.7.13 中使用 fontawesome 图标实现一个菜单。我的想法是用 tx_fontawesome_icon 字段扩展 table 页面 - 没问题 - 它可以在页面属性中使用，也保存在数据库中。

但如何在打字稿中使用它？

[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]

谢谢沃尔克

Answer 1

我假设您在字段中存储了完整的图标名称。如果您可能会跳过前缀，请在包装中构建前缀。

你的 .stdWrap 尝试是可能的，所以我更喜欢属性：.before

你可以这样使用（填写菜单定义的其余部分）：

    :
    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
        }
    }

使用 .noTrimWrap 这样您就可以保留 icon-name.

前后的空格

如果图标应该只在一个 link 内，则需要将图标添加到项目文本（页面标题）中。

因此，您一开始就使用 .stdWrap.wrap。但您需要从 cObject 构建包装（见上文）或使用数据包装：

:
NO {
    :
    stdWrap.dataWrap = <i class="fas {field:tx_fontawesome} fa-2x"></i>|
    :
}

Answer 2

我的解决方案是：

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>&nbsp;|
        }
    }

感谢您的帮助！沃尔克

在 typo3 中带有 fontawesome 图标的菜单

menu with fontawesome icons in typo3

menu

typo3

typoscript

typo3-8.7.x