Styled Icon

Function

a!richTextIcon( icon, altText, caption, size, color, link, linkStyle, showWhen )

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.

See also: Styled icon design guidance, Rich text style guidance

Parameters

Name Keyword Types 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", "MEDIUM_PLUS", "LARGE", "LARGE_PLUS", and "EXTRA_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.

Usage considerations

  • 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

Use the interactive editor below to test out your code:

Linked icons within text

Icons in a grid

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 retweet 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.

  • Add Validations to an Inline Editable Grid (Validation, Grids, Looping): Allows the user to change data directly in a grid, and validate a various entries.

  • Add, Edit, and Remove Data in an Inline Editable Grid (Grids, Looping): Allow the user to change data directly in an inline editable grid.

  • Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.

  • 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 Choices (Cards, Rich Text, Dynamic Links): Use this pattern to display sets of choices that are quick and easy to navigate.

  • Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

  • Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

  • Document List (Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

  • Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a grid to see more details in place of the grid.

  • Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.

  • Duration Display (Rich Text, Events): Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.

  • Dynamic Inputs (Inputs, Dynamic Links): Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed.

  • Grid with Selection Pattern (Grids): This pattern 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. It also provides information on a common save behavior.

  • Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

  • Inline Tags for Side-by-Side Layout Pattern (Formatting): This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.

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

  • Leaderboard (Looping): Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

  • Milestone Bar Pattern (Looping): Use the milestone bar pattern to guide users through sequential steps to complete a task and show the user their progress as they move through the steps. This pattern can be used to either break up longer forms into more manageable sections or combine smaller forms into a more streamlined process.

  • Navigation Patterns (Conditional Display, Formatting): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

  • 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 specified group and displays them in a single column.

  • 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.

Open in Github Built: Tue, May 23, 2023 (06:12:33 PM)

On This Page

FEEDBACK