Icons
This page tabulates icons by their construction and source.
The table columns are as follows:
- Variable: The Jinja2 variable name in
source/variable.yml(custom) orsource/icons.yml(extracted from the Harmony portal's font file). - Raw: The icon rendered via HTML.
- Eval: The icon rendered via its Jinja2 variable expansion.
Not all icons are used in the Jitterbit Documentation site.
jitterbit-icons.ttf font file icons
These icons come from a font file used in the Harmony portal. The file is downloaded from the Harmony portal and stored in source/packaging-resourcces/jitterbit-icon.ttf.
There are two places where Markdown icon variables are defined:
-
source/variable.yml: Contains a mix of variables for icons from different sources. Use these variables if the icon you want to show needs added styling (color, size) to match the Harmony portal's version. -
source/icons.yml: Generated by a script, it contains only icons injitterbit-icons.ttf. The names are the name of the glyph, with dash replaced by underscore, and prefixed withicon_. Use these variables if the icon you want to show needs no additional styling.
The icons.yml file, and its associated CSS style file source/docs/_css/icons.css are created by the script scripts/icons/jitterbit-icons.sh. The top of the script explains how to use it. It only needs to be run when the font file changes. Usually this is because an icon was added.
Given these sources of icons, we can classify them as follows:
-
Unstyled: These use only the class name. All icons in
icons.yml(auto) are in this category. -
Styled: These use the class name, and add custom styling for color, size, position. These only appear in
variables.yml. -
Composite: These use the class names of two icons, one nested within another, and add custom styling on one or other of the icons. (In most cases, the outer icon is the custom class
item-circle, which does not come from the font file.) These also only appear invariables.yml.
The remaining sections render icons according to these categories.
Unstyled
See _jitterbit-icons.
Styled
Icons from jitterbit-icons.tff. Styled with color or size.
| Variable | Raw | Eval |
|---|---|---|
| icon.blue.launch | ||
| icon.arrowRightGrey | ||
| icon.bugSolidGray | ||
| icon.checkCircleFilledYellow | ||
| icon.checkCircleFilledGreen | ||
| icon.checkCircleFilledBlue | ||
| icon.clearRed | ||
| icon.clearYellow | ||
| icon.error | ||
| icon.errorCircleLine | ||
| icon.errorDiamondRed | ||
| icon.errorDiamondRedB | ||
| icon.errorDiamondWhite (White on white) | ||
| icon.infoFullGrey | ||
| icon.pendingBlue | ||
| icon.receivedBlue | ||
| icon.runningOperationsBlue | ||
| icon.warningFilledOrange | ||
| icon.variable | ||
| icon.submittedBlue |
Composite
Icons from jitterbit-icons.ttf, nested and styled to create the desired look.
| Variable | Raw | Eval |
|---|---|---|
| icon.add | ||
| icon.paginator.left.orange | ||
| icon.paginator.left.gray | ||
| icon.paginator.right.orange | ||
| icon.paginator.right.gray | ||
| icon.orange.arrowLeftCircle | ||
| icon.orange.arrowRightCircle | ||
| icon.grey.gear | ||
| icon.cancel | ||
| icon.cancelCircleGrey | ||
| icon.cancelCircleGreyB | ||
| icon.cancelGrey | ||
| icon.cancelB | ||
| icon.conditionOrange | ||
| icon.delete | ||
| icon.errorDiamondWhiteRedNum | 1 | 1 |
| icon.sendCircleOrange | ||
| icon.successCircleGrey | ||
| icon.successGrey | ||
| icon.successOrange | ||
| icon.successB | ||
| icon.warningFilledWhiteOrangeNum | 1 | 1 |
| icon.circleActionMenu |
Font Awesome V5
Icons from Font Awesome v5.
| Variable | Raw | Eval |
|---|---|---|
| chk | ||
| y | ||
| n | ||
| fa.angle_down | ||
| fa.angle_up | ||
| fa.angle_right | ||
| fa.arrow_circle_up | ||
| fa.arrow_circle_down | ||
| fa.arrows_alt_h | ||
| fa.arrowLeft | ||
| fa.arrowRight | ||
| fa.bell | ||
| fa.book | ||
| fa.bookmark | ||
| fa.briefcase | ||
| fa.bullseye | ||
| fa.calendar | ||
| fa.check | ||
| fa.chevron_left | ||
| fa.chevron_right | ||
| fa.chevron_down | ||
| fa.code_branch | ||
| fa.code | ||
| fa.cog | ||
| fa.cogs | ||
| fa.kopy | ||
| fa.cubes | ||
| fa.database | ||
| fa.download | ||
| fa.edit | ||
| fa.ellipsis_h | ||
| fa.ellipsis_v | ||
| fa.envelope | ||
| fa.exchange_alt | ||
| fa.exclamation | ||
| fa.externalLinkAlt | ||
| fa.eye_slash | ||
| fa.eye | ||
| fa.file_download | ||
| fa.fileDownloadRed | ||
| fa.file_export | ||
| fa.file_import | ||
| fa.globe | ||
| fa.grip_vertical | ||
| fa.hourglass | ||
| fa.info_circle | ||
| fa.info | ||
| fa.link | ||
| fa.list | ||
| fa.lock | ||
| fa.magic | ||
| fa.map_marked | ||
| fa.map_marker_alt | ||
| fa.minus_circle | ||
| fa.object_ungroup | ||
| fa.pen | ||
| fa.play | ||
| fa.plus_circle | ||
| fa.plus | ||
| fa.plus_square | ||
| fa.project_diagram | ||
| fa.question_circle | ||
| fa.redo_alt | ||
| fa.retweet | ||
| fa.running | ||
| fa.save | ||
| fa.search | ||
| fa.server | ||
| fa.shield_alt | ||
| fa.sign_in_alt | ||
| fa.star | ||
| fa.stream | ||
| fa.sync_alt | ||
| fa.syncAltRot90 | ||
| fa.tasks | ||
| fa.th_large | ||
| fa.th_small | ||
| fa.thumbs_up | ||
| fa.times | ||
| fa.tools | ||
| fa.trash | ||
| fa.undo | ||
| fa.undo_alt | ||
| fa.upload | ||
| fa.users_cog | ||
| fa.users | ||
| fa.user | ||
| fa.userSlash | ||
| fa.green.check | ||
| fa.gray.redo_alt | ||
| fa.regular.plusSquare |
Iconify
Icons from Iconify CSS.
| Variable | Raw | Eval |
|---|---|---|
| icon.clock | ||
| icon.toggleOff | ||
| icon.toggleOn | ||
| sf.add_element | ||
| sf.flow.action | ||
| cs.gray.refresh |
SVG
Icons from SVG code copied from the application.
| Variable | Raw | Eval |
|---|---|---|
| icon.soapFault | ||
| icon.vinyl.bpmnDrilldown | ||
| icon.vinyl.cog | ||
| icon.vinyl.deactivated | ||
| icon.vinyl.workbench | ||
| icon.vinyl.enabled |
Vinyl
Icons used in Vinyl. From BPMN and GlyphIcon sets.
| Variable | Raw | Eval |
|---|---|---|
| icon.vinyl.bpmnLasso | ||
| icon.vinyl.bpmnHand | ||
| icon.vinyl.bpmnSpace | ||
| icon.vinyl.bpmnWrench | ||
| icon.vinyl.bpmnTrash | ||
| icon.vinyl.bpmnConnectionMulti | ||
| icon.vinyl.bpmnStartEventNone | ||
| icon.vinyl.bpmnIntermediateEventNone | ||
| icon.vinyl.bpmnEndEventNone | ||
| icon.vinyl.bpmnGatewayNone | ||
| icon.vinyl.bpmnTask | ||
| icon.vinyl.bpmnSubprocessExpanded | ||
| icon.vinyl.bpmnDataObject | ||
| icon.vinyl.bpmnDataStore | ||
| icon.vinyl.bpmnParticipant | ||
| icon.vinyl.bpmnGroup | ||
| icon.vinyl.bpmnTextAnnotation | ||
| icon.vinyl.bpmnScrewWrench | ||
| icon.vinyl.bpmnLaneInsertAbove | ||
| icon.vinyl.bpmnLaneInsertBelow | ||
| icon.vinyl.bpmnLaneDivideTwo | ||
| icon.vinyl.bpmnLaneDivideThree | ||
| icon.vinyl.ok | ||
| icon.vinyl.chevronRight | ||
| icon.vinyl.filter | ||
| icon.vinyl.trash | ||
| icon.vinyl.folderOpen | ||
| icon.vinyl.newWindow |
Miscellaneous
Custom icons using HTML entities and styles.
| Variable | Raw | Eval |
|---|---|---|
| label.1 | ① | ① |
| label.2 | ② | ② |
| label.3 | ③ | ③ |
| label.4 | ④ | ④ |
| label.5 | ⑤ | ⑤ |
| label.6 | ⑥ | ⑥ |
| label.7 | ⑦ | ⑦ |
| label.8 | ⑧ | ⑧ |
| label.9 | ⑨ | ⑨ |
| label.10 | ⑩ | ⑩ |
| labelPink.1 | ① | ① |
| labelPink.2 | ② | ② |
| labelPink.3 | ③ | ③ |
| labelPink.4 | ④ | ④ |
| labelPink.5 | ⑤ | ⑤ |
| labelPink.6 | ⑥ | ⑥ |
| labelPink.7 | ⑦ | ⑦ |
| labelPink.8 | ⑧ | ⑧ |
| labelPink.9 | ⑨ | ⑨ |
| labelPink.10 | ⑩ | ⑩ |