Styled Icon

Styled Icon

Function: a!richTextIcon()

Display a styled icon within a rich text component. Icons can be styled by configuring a color, size, or link.

To show documents as images within rich text, see Inline Image.

Parameters

Name Keyword Type Description
Icon icon Text The key of the icon to display. See Available Icons below.
Alternative Text altText Text Equivalent alternate text to display when accessibility or browser compatibility issues prevent the icon from displaying.
Caption caption Text Text to display in mouseovers.
Size size Text Determines the icon size. Valid values: "STANDARD" (default), "SMALL", "MEDIUM", and "LARGE".
Color color Text Determines the icon color. Valid values: Any hex color or "STANDARD" (default), "ACCENT", "POSITIVE", "NEGATIVE", and "SECONDARY".
Link link Link Link that determines the behavior of the icon when clicked. Create links with
Link Style linkStyle Text Determines how the link is underlined. Valid values: "INLINE" (default), "STANDALONE".
Visibility showWhen Boolean Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

Notes

  • If Icon is null or contains an empty array, no icon is displayed.
  • If Link is null, the Icon is not displayed as a link.
  • For nested rich text, if two conflicting styles are found (e.g. both SMALL and LARGE), the innermost style will be displayed.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Linked Icons within Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
=a!richTextDisplayField(
  value: {
    "In addition to a personal statement, candidates may submit up to three ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "picture-o"),
        " Fine Art"
      },
      link: a!dynamicLink()
    ),
    ", ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "headphones"),
        " Audio"
      },
      link: a!dynamicLink()
    ),
    ", or ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "video-camera"),
        " Video"
      },
      link: a!dynamicLink()
    ),
    " media samples."
  }
)

Displays the following:

Icons in a Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
=a!gridLayout(
  label: "Today's Incidents",
  headerCells: {
    a!gridLayoutHeaderCell(label: "Type"),
    a!gridLayoutHeaderCell(label: "Status"),
    a!gridLayoutHeaderCell(label: "Summary"),
    a!gridLayoutHeaderCell(label: "Assignee")
  },
  columnConfigs: {
    a!gridLayoutColumnConfig(width: "ICON"),
    a!gridLayoutColumnConfig(width: "ICON")
  },
  rows: {
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "wrench",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "exclamation",
            color: "NEGATIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Broken escalator in Atrium B",
          readOnly: true
        ),
        a!textField(
          value: "Unassigned",
          readOnly: true
        )
      }
    ),
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "ticket",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "arrow-right",
            color: "POSITIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Ticketing queue back-up",
          readOnly: true
        ),
        a!textField(
          value: "Karen Anderson",
          readOnly: true
        )
      }
    ),
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "video-camera",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "check",
            color: "POSITIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Faulty security camera",
          readOnly: true
        ),
        a!textField(
          value: "Amy Lee",
          readOnly: true
        )
      }
    )
  },
  rowHeader: 3
)

Displays the following:

Standalone Links

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
=a!richTextDisplayField(
  value: {
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "home"
        ),
        " Home"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "check-square-o"
        ),
        " My Open Requests"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "file-text-o"
        ),
        " My Documents"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    )
  }
)

Displays the following:

Available Icons

The table below shows each icon.

Icon Key Icon Key Icon Key
star address-book star address-book-o star address-card
star address-card-o star adjust star align-center
star align-justify star align-left star align-right
star ambulance star american-sign-language-interpreting star anchor
star angle-double-down star angle-double-left star angle-double-right
star angle-double-up star angle-down star angle-left
star angle-right star angle-up star archive
star area-chart star arrow-circle-down star arrow-circle-left
star arrow-circle-o-down star arrow-circle-o-left star arrow-circle-o-right
star arrow-circle-o-up star arrow-circle-right star arrow-circle-up
star arrow-down star arrow-left star arrow-right
star arrow-up star arrows star arrows-alt
star arrows-h star arrows-v star asl-interpreting
star assistive-listening-systems star asterisk star at
star audio-description star automobile star backward
star balance-scale star ban star bank
star bar-chart star bar-chart-o star barcode
star bars star bath star bathtub
star battery star battery-0 star battery-1
star battery-2 star battery-3 star battery-4
star battery-empty star battery-full star battery-half
star battery-quarter star battery-three-quarters star bed
star beer star bell star bell-o
star bell-slash star bell-slash-o star bicycle
star binoculars star birthday-cake star blind
star bold star bolt star bomb
star book star bookmark star bookmark-o
star braille star briefcase star bug
star building star building-o star bullhorn
star bullseye star bus star cab
star calculator star calendar star calendar-check-o
star calendar-minus-o star calendar-o star calendar-plus-o
star calendar-times-o star camera star camera-retro
star car star caret-down star caret-left
star caret-right star caret-square-o-down star caret-square-o-left
star caret-square-o-right star caret-square-o-up star caret-up
star cart-arrow-down star cart-plus star cc
star certificate star chain star chain-broken
star check star check-circle star check-circle-o
star check-square star check-square-o star chevron-circle-down
star chevron-circle-left star chevron-circle-right star chevron-circle-up
star chevron-down star chevron-left star chevron-right
star chevron-up star child star circle
star circle-o star circle-o-notch star circle-thin
star clipboard star clock-o star clone
star close star cloud star cloud-download
star cloud-upload star cny star code
star code-fork star coffee star cog
star cogs star columns star comment
star comment-o star commenting star commenting-o
star comments star comments-o star compass
star compress star copy star copyright
star creative-commons star credit-card star crop
star crosshairs star cube star cubes
star cut star cutlery star dashboard
star database star deaf star deafness
star dedent star desktop star diamond
star dollar star dot-circle-o star download
star drivers-license star drivers-license-o star edit
star eject star ellipsis-h star ellipsis-v
star envelope star envelope-o star envelope-open
star envelope-open-o star envelope-square star eraser
star eur star euro star exchange
star exclamation star exclamation-circle star exclamation-triangle
star expand star external-link star external-link-square
star eye star eye-slash star eyedropper
star fast-backward star fast-forward star fax
star feed star female star fighter-jet
star file star file-archive-o star file-audio-o
star file-code-o star file-excel-o star file-image-o
star file-movie-o star file-o star file-pdf-o
star file-photo-o star file-picture-o star file-powerpoint-o
star file-sound-o star file-text star file-text-o
star file-video-o star file-word-o star file-zip-o
star files-o star film star filter
star fire star fire-extinguisher star flag
star flag-checkered star flag-o star flash
star flask star floppy-o star folder
star folder-o star folder-open star folder-open-o
star font star forward star frown-o
star futbol-o star gamepad star gavel
star gbp star gear star gears
star genderless star gift star glass
star globe star graduation-cap star group
star h-square star hand-grab-o star hand-lizard-o
star hand-o-down star hand-o-left star hand-o-right
star hand-o-up star hand-paper-o star hand-peace-o
star hand-pointer-o star hand-rock-o star hand-scissors-o
star hand-spock-o star hand-stop-o star handshake-o
star hard-of-hearing star hashtag star hdd-o
star header star headphones star heart
star heart-o star heartbeat star history
star home star hospital-o star hotel
star hourglass star hourglass-1 star hourglass-2
star hourglass-3 star hourglass-end star hourglass-half
star hourglass-o star hourglass-start star i-cursor
star id-badge star id-card star id-card-o
star ils star image star inbox
star indent star industry star info
star info-circle star inr star institution
star intersex star italic star jpy
star key star keyboard-o star krw
star language star laptop star leaf
star legal star lemon-o star level-down
star level-up star life-bouy star life-buoy
star life-ring star life-saver star lightbulb-o
star line-chart star link star list
star list-alt star list-ol star list-ul
star location-arrow star lock star long-arrow-down
star long-arrow-left star long-arrow-right star long-arrow-up
star low-vision star magic star magnet
star mail-forward star mail-reply star mail-reply-all
star male star map star map-marker
star map-o star map-pin star map-signs
star mars star mars-double star mars-stroke
star mars-stroke-h star mars-stroke-v star medkit
star meh-o star mercury star microchip
star microphone star microphone-slash star minus
star minus-circle star minus-square star minus-square-o
star mobile star mobile-phone star money
star moon-o star mortar-board star motorcycle
star mouse-pointer star music star navicon
star neuter star newspaper-o star object-group
star object-ungroup star outdent star paint-brush
star paper-plane star paper-plane-o star paperclip
star paragraph star paste star pause
star pause-circle star pause-circle-o star paw
star pencil star pencil-square star pencil-square-o
star percent star phone star phone-square
star photo star picture-o star pie-chart
star plane star play star play-circle
star play-circle-o star plug star plus
star plus-circle star plus-square star plus-square-o
star podcast star power-off star print
star puzzle-piece star qrcode star question
star question-circle star question-circle-o star quote-left
star quote-right star random star recycle
star refresh star registered star remove
star reorder star repeat star reply
star reply-all star rmb star road
star rocket star rotate-left star rotate-right
star rouble star rss star rss-square
star rub star ruble star rupee
star s15 star save star scissors
star search star search-minus star search-plus
star send star send-o star server
star share star share-square star share-square-o
star shekel star sheqel star shield
star ship star shopping-bag star shopping-basket
star shopping-cart star shower star sign-in
star sign-language star sign-out star signal
star signing star sitemap star sliders
star smile-o star snowflake-o star soccer-ball-o
star sort star sort-alpha-asc star sort-alpha-desc
star sort-amount-asc star sort-amount-desc star sort-asc
star sort-desc star sort-down star sort-numeric-asc
star sort-numeric-desc star sort-up star space-shuttle
star spinner star spoon star square
star square-o star star star star-half
star star-half-empty star star-half-full star star-half-o
star star-o star step-backward star step-forward
star stethoscope star sticky-note star sticky-note-o
star stop star stop-circle star stop-circle-o
star street-view star strikethrough star subscript
star subway star suitcase star sun-o
star superscript star support star table
star tablet star tachometer star tag
star tags star tasks star taxi
star television star terminal star text-height
star text-width star th star th-large
star th-list star thermometer star thermometer-0
star thermometer-1 star thermometer-2 star thermometer-3
star thermometer-4 star thermometer-empty star thermometer-full
star thermometer-half star thermometer-quarter star thermometer-three-quarters
star thumb-tack star thumbs-down star thumbs-o-down
star thumbs-o-up star thumbs-up star ticket
star times star times-circle star times-circle-o
star times-rectangle star times-rectangle-o star tint
star toggle-down star toggle-left star toggle-off
star toggle-on star toggle-right star toggle-up
star trademark star train star transgender
star transgender-alt star trash star trash-o
star tree star trophy star truck
star try star tty star turkish-lira
star tv star umbrella star underline
star undo star universal-access star university
star unlink star unlock star unlock-alt
star unsorted star upload star usd
star user star user-circle star user-circle-o
star user-md star user-o star user-plus
star user-secret star user-times star users
star vcard star vcard-o star venus
star venus-double star venus-mars star video-camera
star volume-control-phone star volume-down star volume-off
star volume-up star warning star wheelchair
star wheelchair-alt star wifi star window-close
star window-close-o star window-maximize star window-minimize
star window-restore star won star wrench
star yen        

The following patterns include usage of the Styled Icon.

  • Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

  • Cards as List Items Patterns (Choice Components, Images): The cards as list items pattern is good for creating visually rich interfaces using a combination of cards and billboards to show lists of like items.

  • Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a list to see more details.

  • Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern is a graphically rich, multi-part interface that allows users to drill into particular chart bars for more details.

  • Grid with Selection Pattern (Grids): This pattern provides useful save behavior and is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data.

  • KPI Patterns (Formatting): The Key Performance Indicator ("KPI") patterns provide a common style and format for displaying important performance measures.

  • Set a Numeric Rating Using Rich Text Icons (Conditional Display): Save a numeric score using a set of clickable rich text icons.

  • Show a Numeric Rating as Rich Text Icons (Conditional Display): Dynamically show a star rating based on a numeric score.

  • User List Pattern (Looping): The user list pattern retrieves all the users in a specific group and displays them in a single column. Each user's name and title appears next to their profile picture which is styled as an avatar.

  • Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

FEEDBACK