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 resistance 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    
FEEDBACK