Icon changes font in SP Gallery formatting

Question

Hi All,&nbsp;I'm new to json and am trying to use icons in my titles.&nbsp; When I use an icon, it changes the font to Times New Roman.&nbsp; If I force Arial or other, the icon shows an error.&nbsp; &nbsp;Is there a way to isolate the Icon from the title text so I can change its color and retain the font of the title.&nbsp;&nbsp;"children": [
              {
                "elmType": "a",
                "attributes": {
                  "class": "ms-fontColor-yellow sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "txtContent": "[$Title]",
                "attributes": {
                  "iconName": "lightbulb",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                }
              }
            ]&nbsp;&nbsp;Results in:

andrew_o10 · Accepted Answer

Got it working.&nbsp;"children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size": "1.30em"
                },
                "attributes": {
                  "iconName": "lightbulb",
                  "class": "sp-css-color-yellow"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "font-size": ".9em"
                },
                "txtContent": "=if ([$Title] == '', '–',' '+ [$Title])",
                "attributes": {
                  "class": "sp-field-fontSizeSmall sp-css-color-BlackText sp-card-highlightedContent"
                }
              }
            ]

Forum Discussion

Icon changes font in SP Gallery formatting

1 Reply

Resources