From 8cdbba9b68d35410db8b5f4def4767731549f90c Mon Sep 17 00:00:00 2001 From: Andrew Hunt <andrew@aghstrategies.com> Date: Thu, 14 Sep 2017 00:45:11 -0400 Subject: [PATCH] UI - Icons: fixed backticks --- docs/framework/ui.md | 66 ++++++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/framework/ui.md b/docs/framework/ui.md index b8d74230..87e56028 100644 --- a/docs/framework/ui.md +++ b/docs/framework/ui.md @@ -174,7 +174,7 @@ site whenever it would useful to give users a quick visual cue. Starting with version 4.7, CiviCRM's primary icon system is [Font Awesome](http://fontawesome.io/), an open-source icon font. Font Awesome 4.4 is shipped with CiviCRM 4.7, -and any of the [Font Awesome icons](http://fontawesome.io/icons//) +and any of the [Font Awesome icons](http://fontawesome.io/icons/) can be included with an element with the classes `crm-i` and the `fa-...` class corresponding to the icon. @@ -204,38 +204,38 @@ used: | Class | Meaning within CiviCRM | Compare with | | -- | -- | -- | -| `[.fa-trash](http://fontawesome.io/icon/trash)` | delete something that's already been saved | `[.fa-times](http://fontawesome.io/icon/times)` to cancel something that hasn't been saved yet<br/><br/>`[.fa-undo](http://fontawesome.io/icon/undo)` to roll back a bigger process | -| `[.fa-arrows](http://fontawesome.io/icon/arrows)` | move something (anywhere) | `[.fa-chevron-left](http://fontawesome.io/icon/chevron-left)` and `[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` to advance through a series | -| `[.fa-trophy](http://fontawesome.io/icon/trophy)` | award something a prize | `[.fa-check](http://fontawesome.io/icon/check)` to confirm something | -| `[.fa-random](http://fontawesome.io/icon/random)` | swap places | | -| `[.fa-print](http://fontawesome.io/icon/print)` | print something | | -| `[.fa-clipboard](http://fontawesome.io/icon/clipboard)` | paste something, or file onto a case | | -| `[.fa-undo](http://fontawesome.io/icon/undo)` | undo (or revert) things | `[.fa-chevron-left](http://fontawesome.io/icon/chevron-left)` to move backwards in a process (revert things in accounting)<br/><br/>`[.fa-trash](http://fontawesome.io/icon/trash)` to delete something<br/><br/>`[.fa-times](http://fontawesome.io/icon/times)` to remove something (that hasn't yet been saved) or to exit without saving | -| `[.fa-info-circle](http://fontawesome.io/icon/info-circle)` | highlight information | `[.fa-lightbulb-o](http://fontawesome.io/icon/lightbulb-o)` to highlight a tip or suggestion<br/><br/>`[.fa-exclamation-triangle](http://fontawesome.io/icon/exclamation-triangle)` to highlight a danger | -| `[.fa-list-alt](http://fontawesome.io/icon/list-alt)` | display the details of something | `[.fa-television](http://fontawesome.io/icon/television)` to preview something<br/><br/>`[.fa-expand](http://fontawesome.io/icon/expand)` and `[.fa-compress](http://fontawesome.io/icon/compress)` to make something full-screen or a window -| `[.fa-bars](http://fontawesome.io/icon/bars)` | open a menu of options | `[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` to advance to the next thing<br/><br/>`[.fa-expand](http://fontawesome.io/icon/expand)` to make something full-screen | -| `[.fa-search](http://fontawesome.io/icon/search)` | search for things | `[.fa-list-alt](http://fontawesome.io/icon/list-alt)` to display details<br/><br/>`[.fa-search-plus](http://fontawesome.io/icon/search-plus)` to zoom in | -| `[.fa-lightbulb-o](http://fontawesome.io/icon/lightbulb-o)` | an idea to consider | `[.fa-bolt](http://fontawesome.io/icon/bolt)` to execute something bold<br/><br/>`[.fa-info-circle](http://fontawesome.io/icon/info-circle)` to provide normative information<br/><br/>`[.fa-exclamation-triangle](http://fontawesome.io/icon/exclamation-triangle)` to highlight a danger | -| `[.fa-pencil](http://fontawesome.io/icon/pencil)` | edit a value | `[.fa-wrench](http://fontawesome.io/icon/wrench)` to edit configuration<br/><br/>`[.fa-floppy-o](http://fontawesome.io/icon/floppy-o)` to save a value | -| `[.fa-exclamation-triangle](http://fontawesome.io/icon/exclamation-triangle)` | provide a warning | `[.fa-info-circle](http://fontawesome.io/icon/info-circle)` to give information<br/><br/>`[.fa-lightbulb-o](http://fontawesome.io/icon/lightbulb-o)` to highlight a tip or suggestion | -| `[.fa-expand](http://fontawesome.io/icon/expand)` | make a UI element bigger | | -| `[.fa-compress](http://fontawesome.io/icon/compress)` | make a UI element smaller, or merge two things together | | -| `[.fa-rocket](http://fontawesome.io/icon/rocket)` | embark upon an adventure | `[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` to advance to something less exciting and/or fraught with danger<br/><br/>`[.fa-check](http://fontawesome.io/icon/check)` to agree to something that is already a done deal<br/><br/>`[.fa-flag-checkered](http://fontawesome.io/icon/flag-checkered)` to finish a long process<br/><br/>`[.fa-space-shuttle](http://fontawesome.io/icon/space-shuttle)` if you need to access your payload with the Canada Arm | -| `[.fa-plus-circle](http://fontawesome.io/icon/plus-circle)` | add a new item | *if you have several of these side-by-side, try to provide more illustrative icons for what you're adding*<br/><br/>`[.fa-bolt](http://fontawesome.io/icon/bolt)` to force a new thing | -| `[.fa-bolt](http://fontawesome.io/icon/bolt)` | execute something forcefully | `[.fa-floppy-o](http://fontawesome.io/icon/floppy-o)` to save something normally<br/><br/>`[.fa-check](http://fontawesome.io/icon/check)` to agree to something innocuous<br/><br/>`[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` to advance to the next step<br/><br/>`[.fa-trash](http://fontawesome.io/icon/trash)` to delete something<br/><br/>`[.fa-undo](http://fontawesome.io/icon/undo)` to revert to something | -| `[.fa-television](http://fontawesome.io/icon/television)` | preview something | `[.fa-search](http://fontawesome.io/icon/search)` to search for things<br/><br/>`[.fa-list-alt](http://fontawesome.io/icon/list-alt)` to view the details of something<br/><br/>`[.fa-times](http://fontawesome.io/icon/times)` to close the edit dialog and see the thing itself | -| `[.fa-times](http://fontawesome.io/icon/times)` | close something without saving anything, or remove something that hasn't yet been saved | `[.fa-trash](http://fontawesome.io/icon/trash)` to delete something that has been saved already<br/><br/>`[.fa-check](http://fontawesome.io/icon/check)` to complete something (that has just been saved or that is to be saved upon clicking the icon)<br/><br/>`[.fa-undo](http://fontawesome.io/icon/undo)` to roll something back<br/><br/>`[.fa-chevron-left](http://fontawesome.io/icon/chevron-left)` to return to the previous step | -| `[.fa-check](http://fontawesome.io/icon/check)` | complete something | `[.fa-times](http://fontawesome.io/icon/times)` to close out without doing anything<br/><br/>`[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` to advance to the next step<br/><br/>`[.fa-flag-checkered](http://fontawesome.io/icon/flag-checkered)` to complete something major<br/><br/>`[.fa-rocket](http://fontawesome.io/icon/rocket)` to agree to start something big<br/><br/>`[.fa-bolt](http://fontawesome.io/icon/bolt)` to execute something bold | -| `[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)` | advance to the next thing | `[.fa-check](http://fontawesome.io/icon/check)` to complete something<br/><br/>`[.fa-rocket](http://fontawesome.io/icon/rocket)` to start an epic journey | -| `[.fa-chevron-left](http://fontawesome.io/icon/chevron-left)` | go back | `[.fa-times](http://fontawesome.io/icon/times)` to cancel the process<br/><br/>`[.fa-undo](http://fontawesome.io/icon/undo)` to revert what was done | -| `[.fa-floppy-o](http://fontawesome.io/icon/floppy-o)` | save without advancing | `[.fa-check](http://fontawesome.io/icon/check)` to save and complete<br/><br/>`[.fa-pencil](http://fontawesome.io/icon/pencil)` to start editing a value | -| `[.fa-wrench](http://fontawesome.io/icon/wrench)` | modify options | `[.fa-pencil](http://fontawesome.io/icon/pencil)` to edit values<br/><br/>`[.fa-bolt](http://fontawesome.io/icon/bolt)` to do something drastic | -| `[.fa-paper-plane](http://fontawesome.io/icon/paper-plane)` | send something | `[.fa-envelope](http://fontawesome.io/icon/envelope)` to do something else about email<br/><br/>`[.fa-check](http://fontawesome.io/icon/check)`, `[.fa-chevron-right](http://fontawesome.io/icon/chevron-right)`, `[.fa-bolt](http://fontawesome.io/icon/bolt)`, `[.fa-rocket](http://fontawesome.io/icon/rocket)` or others if you are doing an action that does not send a message immediately<br/><br/>`[.fa-fax](http://fontawesome.io/icon/fax)` to send something on curly paper | -| `[.fa-envelope](http://fontawesome.io/icon/envelope)` | do something about email other than actually sending it *(use judiciously when within CiviMail, where everything is about email)* | `[.fa-paper-plane](http://fontawesome.io/icon/paper-plane)` to actually send an email<br/><br/>`[.fa-pencil](http://fontawesome.io/icon/pencil)` to edit a value | -| `[.fa-flag-checkered](http://fontawesome.io/icon/flag-checkered)` | complete a multi-step action | `[.fa-trophy](http://fontawesome.io/icon/trophy)` to award a prize<br/><br/>`[.fa-check](http://fontawesome.io/icon/check)` to finish something quick | -| `[.fa-bell-o](http://fontawesome.io/icon/bell-o)` | sound alarms | `[.fa-paper-plane](http://fontawesome.io/icon/paper-plane)` to send an email notification<br/><br/>`[.fa-exclamation-triangle](http://fontawesome.io/icon/exclamation-triangle)` to highlight something dangerous | -| `[.fa-bell-slash-o](http://fontawesome.io/icon/bell-slash-o)` | hush alarms | `[.fa-times](http://fontawesome.io/icon/times)` to cancel something<br/><br/>`[.fa-user-secret](http://fontawesome.io/icon/user-secret)` to cloak identity | -| `[.fa-clock-o](http://fontawesome.io/icon/clock-o)` | schedule something | `[.fa-history](http://fontawesome.io/icon/history)` to roll back the clock<br/><br/>`[.fa-calendar](http://fontawesome.io/icon/calendar)` to display dates<br/><br/>`[.fa-birthday-cake](http://fontawesome.io/icon/birthday-cake)` to schedule a celebration | +| [`.fa-trash`](http://fontawesome.io/icon/trash) | delete something that's already been saved | [`.fa-times`](http://fontawesome.io/icon/times) to cancel something that hasn't been saved yet<br/><br/>[`.fa-undo`](http://fontawesome.io/icon/undo) to roll back a bigger process | +| [`.fa-arrows`](http://fontawesome.io/icon/arrows) | move something (anywhere) | [`.fa-chevron-left`](http://fontawesome.io/icon/chevron-left) and [`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) to advance through a series | +| [`.fa-trophy`](http://fontawesome.io/icon/trophy) | award something a prize | [`.fa-check`](http://fontawesome.io/icon/check) to confirm something | +| [`.fa-random`](http://fontawesome.io/icon/random) | swap places | | +| [`.fa-print`](http://fontawesome.io/icon/print) | print something | | +| [`.fa-clipboard`](http://fontawesome.io/icon/clipboard) | paste something, or file onto a case | | +| [`.fa-undo`](http://fontawesome.io/icon/undo) | undo (or revert) things | [`.fa-chevron-left`](http://fontawesome.io/icon/chevron-left) to move backwards in a process (revert things in accounting)<br/><br/>[`.fa-trash`](http://fontawesome.io/icon/trash) to delete something<br/><br/>[`.fa-times`](http://fontawesome.io/icon/times) to remove something (that hasn't yet been saved) or to exit without saving | +| [`.fa-info-circle`](http://fontawesome.io/icon/info-circle) | highlight information | [`.fa-lightbulb-o`](http://fontawesome.io/icon/lightbulb-o) to highlight a tip or suggestion<br/><br/>[`.fa-exclamation-triangle`](http://fontawesome.io/icon/exclamation-triangle) to highlight a danger | +| [`.fa-list-alt`](http://fontawesome.io/icon/list-alt) | display the details of something | [`.fa-television`](http://fontawesome.io/icon/television) to preview something<br/><br/>[`.fa-expand`](http://fontawesome.io/icon/expand) and [`.fa-compress`](http://fontawesome.io/icon/compress) to make something full-screen or a window +| [`.fa-bars`](http://fontawesome.io/icon/bars) | open a menu of options | [`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) to advance to the next thing<br/><br/>[`.fa-expand`](http://fontawesome.io/icon/expand) to make something full-screen | +| [`.fa-search`](http://fontawesome.io/icon/search) | search for things | [`.fa-list-alt`](http://fontawesome.io/icon/list-alt) to display details<br/><br/>[`.fa-search-plus`](http://fontawesome.io/icon/search-plus) to zoom in | +| [`.fa-lightbulb-o`](http://fontawesome.io/icon/lightbulb-o) | an idea to consider | [`.fa-bolt`](http://fontawesome.io/icon/bolt) to execute something bold<br/><br/>[`.fa-info-circle`](http://fontawesome.io/icon/info-circle) to provide normative information<br/><br/>[`.fa-exclamation-triangle`](http://fontawesome.io/icon/exclamation-triangle) to highlight a danger | +| [`.fa-pencil`](http://fontawesome.io/icon/pencil) | edit a value | [`.fa-wrench`](http://fontawesome.io/icon/wrench) to edit configuration<br/><br/>[`.fa-floppy-o`](http://fontawesome.io/icon/floppy-o) to save a value | +| [`.fa-exclamation-triangle`](http://fontawesome.io/icon/exclamation-triangle) | provide a warning | [`.fa-info-circle`](http://fontawesome.io/icon/info-circle) to give information<br/><br/>[`.fa-lightbulb-o`](http://fontawesome.io/icon/lightbulb-o) to highlight a tip or suggestion | +| [`.fa-expand`](http://fontawesome.io/icon/expand) | make a UI element bigger | | +| [`.fa-compress`](http://fontawesome.io/icon/compress) | make a UI element smaller, or merge two things together | | +| [`.fa-rocket`](http://fontawesome.io/icon/rocket) | embark upon an adventure | [`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) to advance to something less exciting and/or fraught with danger<br/><br/>[`.fa-check`](http://fontawesome.io/icon/check) to agree to something that is already a done deal<br/><br/>[`.fa-flag-checkered`](http://fontawesome.io/icon/flag-checkered) to finish a long process<br/><br/>[`.fa-space-shuttle`](http://fontawesome.io/icon/space-shuttle) if you need to access your payload with the Canada Arm | +| [`.fa-plus-circle`](http://fontawesome.io/icon/plus-circle) | add a new item | *if you have several of these side-by-side, try to provide more illustrative icons for what you're adding*<br/><br/>[`.fa-bolt`](http://fontawesome.io/icon/bolt) to force a new thing | +| [`.fa-bolt`](http://fontawesome.io/icon/bolt) | execute something forcefully | [`.fa-floppy-o`](http://fontawesome.io/icon/floppy-o) to save something normally<br/><br/>[`.fa-check`](http://fontawesome.io/icon/check) to agree to something innocuous<br/><br/>[`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) to advance to the next step<br/><br/>[`.fa-trash`](http://fontawesome.io/icon/trash) to delete something<br/><br/>[`.fa-undo`](http://fontawesome.io/icon/undo) to revert to something | +| [`.fa-television`](http://fontawesome.io/icon/television) | preview something | [`.fa-search`](http://fontawesome.io/icon/search) to search for things<br/><br/>[`.fa-list-alt`](http://fontawesome.io/icon/list-alt) to view the details of something<br/><br/>[`.fa-times`](http://fontawesome.io/icon/times) to close the edit dialog and see the thing itself | +| [`.fa-times`](http://fontawesome.io/icon/times) | close something without saving anything, or remove something that hasn't yet been saved | [`.fa-trash`](http://fontawesome.io/icon/trash) to delete something that has been saved already<br/><br/>[`.fa-check`](http://fontawesome.io/icon/check) to complete something (that has just been saved or that is to be saved upon clicking the icon)<br/><br/>[`.fa-undo`](http://fontawesome.io/icon/undo) to roll something back<br/><br/>[`.fa-chevron-left`](http://fontawesome.io/icon/chevron-left) to return to the previous step | +| [`.fa-check`](http://fontawesome.io/icon/check) | complete something | [`.fa-times`](http://fontawesome.io/icon/times) to close out without doing anything<br/><br/>[`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) to advance to the next step<br/><br/>[`.fa-flag-checkered`](http://fontawesome.io/icon/flag-checkered) to complete something major<br/><br/>[`.fa-rocket`](http://fontawesome.io/icon/rocket) to agree to start something big<br/><br/>[`.fa-bolt`](http://fontawesome.io/icon/bolt) to execute something bold | +| [`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right) | advance to the next thing | [`.fa-check`](http://fontawesome.io/icon/check) to complete something<br/><br/>[`.fa-rocket`](http://fontawesome.io/icon/rocket) to start an epic journey | +| [`.fa-chevron-left`](http://fontawesome.io/icon/chevron-left) | go back | [`.fa-times`](http://fontawesome.io/icon/times) to cancel the process<br/><br/>[`.fa-undo`](http://fontawesome.io/icon/undo) to revert what was done | +| [`.fa-floppy-o`](http://fontawesome.io/icon/floppy-o) | save without advancing | [`.fa-check`](http://fontawesome.io/icon/check) to save and complete<br/><br/>[`.fa-pencil`](http://fontawesome.io/icon/pencil) to start editing a value | +| [`.fa-wrench`](http://fontawesome.io/icon/wrench) | modify options | [`.fa-pencil`](http://fontawesome.io/icon/pencil) to edit values<br/><br/>[`.fa-bolt`](http://fontawesome.io/icon/bolt) to do something drastic | +| [`.fa-paper-plane`](http://fontawesome.io/icon/paper-plane) | send something | [`.fa-envelope`](http://fontawesome.io/icon/envelope) to do something else about email<br/><br/>[`.fa-check`](http://fontawesome.io/icon/check), [`.fa-chevron-right`](http://fontawesome.io/icon/chevron-right), [`.fa-bolt`](http://fontawesome.io/icon/bolt), [`.fa-rocket`](http://fontawesome.io/icon/rocket) or others if you are doing an action that does not send a message immediately<br/><br/>[`.fa-fax`](http://fontawesome.io/icon/fax) to send something on curly paper | +| [`.fa-envelope`](http://fontawesome.io/icon/envelope) | do something about email other than actually sending it *(use judiciously when within CiviMail, where everything is about email)* | [`.fa-paper-plane`](http://fontawesome.io/icon/paper-plane) to actually send an email<br/><br/>[`.fa-pencil`](http://fontawesome.io/icon/pencil) to edit a value | +| [`.fa-flag-checkered`](http://fontawesome.io/icon/flag-checkered) | complete a multi-step action | [`.fa-trophy`](http://fontawesome.io/icon/trophy) to award a prize<br/><br/>[`.fa-check`](http://fontawesome.io/icon/check) to finish something quick | +| [`.fa-bell-o`](http://fontawesome.io/icon/bell-o) | sound alarms | [`.fa-paper-plane`](http://fontawesome.io/icon/paper-plane) to send an email notification<br/><br/>[`.fa-exclamation-triangle`](http://fontawesome.io/icon/exclamation-triangle) to highlight something dangerous | +| [`.fa-bell-slash-o`](http://fontawesome.io/icon/bell-slash-o) | hush alarms | [`.fa-times`](http://fontawesome.io/icon/times) to cancel something<br/><br/>[`.fa-user-secret`](http://fontawesome.io/icon/user-secret) to cloak identity | +| [`.fa-clock-o`](http://fontawesome.io/icon/clock-o) | schedule something | [`.fa-history`](http://fontawesome.io/icon/history) to roll back the clock<br/><br/>[`.fa-calendar`](http://fontawesome.io/icon/calendar) to display dates<br/><br/>[`.fa-birthday-cake`](http://fontawesome.io/icon/birthday-cake) to schedule a celebration | ### Special effects -- GitLab