Icon/V1

Font Awesome icons with sizing and color options.

Basic Structure

JSON

{
  "type": "Icon/V1",
  "id": "6Z-IcnEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "margin-top": 15 }
  },
  "params": {
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elIcon": {
      "attrs": {
        "className": "fas fa-star",
        "style": {
          "font-size": 32,
          "color": "#fbbf24"
        }
      },
      "params": {
        "font-size--unit": "px"
      }
    }
  }
}

Icon Classes

CF2 uses Font Awesome icons. Common prefixes:

Prefix	Style
`fas`	Solid (filled)
`far`	Regular (outline)
`fab`	Brands

Common Icons

Class	Description
`fas fa-check`	Checkmark
`fas fa-check-circle`	Checkmark in circle
`fas fa-star`	Star
`fas fa-heart`	Heart
`fas fa-arrow-right`	Arrow right
`fas fa-bolt`	Lightning bolt
`fas fa-shield-alt`	Shield
`fas fa-lock`	Lock
`fas fa-envelope`	Envelope
`fas fa-phone`	Phone

Sizing

JSON

{
  "selectors": {
    ".elIcon": {
      "attrs": {
        "style": { "font-size": 48 }
      },
      "params": {
        "font-size--unit": "px"
      }
    }
  }
}

Coloring

JSON

{
  "selectors": {
    ".elIcon": {
      "attrs": {
        "style": {
          "color": "#3b82f6"
        }
      }
    }
  }
}

Supported Features

Feature	Supported
Background	No
Border	No
Shadow	No
Corners	No

Tip: To add background or border to an icon, wrap it in a FlexContainer.