Icons - adaptlearning/adapt-contrib-vanilla GitHub Wiki
A font set called vanilla is used to display icons within Adapt and is bundled, as standard, with the Adapt Framework.
An overview of all available icons can be found below:
The Vanilla theme supports the addition of an inline icon within the text content. This can be achieved by adding the following:
<span class='icon icon-arrow-down-2 inline-icon' aria-hidden='true'></span>
e.g.
Lorem ipsum dolor sit amet <span class='icon icon-arrow-down-2 inline-icon' aria-hidden='true'></span> consectetur adipiscing elit.
Each of the classes have a specific function and are required alongside the attribute.
| Class | Description |
|---|---|
icon |
The global icon class responsible for setting the required styles for icons. |
icon-arrow-down-2 |
The icon class that you wish to use. See the icon breakdown tables below to find a list of available icons. |
inline-icon |
The custom class required to align the icons correctly with the text. |
| Attribute | Description |
|---|---|
aria-hidden='true' |
This attribute is required to remove the icon from the screen reader read order. |
Note: the color the icon inherits is the same color as the text that the icon sits alongside. If a different color is required for the icon a custom class will be required in the theme.
It is possible to expand upon the standard icon set by either editing existing or adding new icons.
To get started import the selection.json file into the Icomoon App and select 'Yes' when asked prompted to load all settings stored in the file. This will load the standard icon set into the app and pre-select them all.
With all the icons selected press the 'Generate Font' button in the lower right hand side of the screen. Selecting this button will generate the icons and show their associated content ID values. Selecting the visual representation of an icon will open an overlay where properties such as rotation, position, and size can be modified. Alternatively an icon can be replaced entirely by using the 'Replace' button. When ready select the 'Download' button to receive the modified vanilla icon set.
It is highly recommended that any customisations done to the standard icon set be loaded in as a separate font as part of the theme.
Ensure that any new icons being added to the icon set are saved as an .svg and are created using fills rather than strokes as the latter is not supported.
Select the 'Import Icons' button from the main navigation bar in the upper left hand side of the screen and choose the new icons to add to the font set. This will load the chosen icons into the apps interface, from here select the new icons and then press 'Generate Font' button in the lower right hand side of the screen. The new icons will be generated unique content ID values that continue on from the standard set. If any edits to the icons are required they can be done from this screen, otherwise select the 'Download' button to receive the modified vanilla icon set.
It is highly recommended that any customisations done to the standard icon set be loaded in as a separate font as part of the theme.
To be added.
Below is a list of every icon bundled as part of the Core's vanilla icon font set and is available in all Adapt projects, Framework and Authoring Tool, as a standard.
| Header | Description |
|---|---|
| Icon name | The name of the source file used to create the icon. For the most part this information can be safely ignored though it is useful when editing icons within IcoMoon. |
| CSS class name | The class name required to use inline icons. Can also be used within Less for adding an icon to an element. |
| Content ID | As icons are bundled together as part of a custom font set they each have a unique content id. For the most part, the content id can be safely ignored for content purposes but it can be useful as a reference when creating custom styles or when adding more icons to the font set. |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| arrow-with-circle-down | .icon-arrow-with-circle-down |
e900 | info-with-circle | .icon-info-with-circle |
e908 | |
| arrow-with-circle-left | .icon-arrow-with-circle-left |
e901 | location | .icon-location |
e909 | |
| arrow-with-circle-right | .icon-arrow-with-circle-right |
e902 | medal | .icon-medal |
e90a | |
| arrow-with-circle-up | .icon-arrow-with-circle-up |
e903 | price-ribbon | .icon-price-ribbon |
e90b | |
| chevron-with-circle-down | .icon-chevron-with-circle-down |
e904 | shield | .icon-shield |
e90c | |
| chevron-with-circle-left | .icon-chevron-with-circle-left |
e905 | stopwatch | .icon-stopwatch |
e90d | |
| chevron-with-circle-right | .icon-chevron-with-circle-right |
e906 | text-document-inverted | .icon-text-document-inverted |
e90e | |
| chevron-with-circle-up | .icon-chevron-with-circle-up |
e907 | text-document | .icon-text-document |
e90f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| trophy | .icon-trophy |
e910 | mobile | .icon-mobile |
e918 | |
| arrow-down | .icon-arrow-down |
e911 | desktop | .icon-desktop |
e919 | |
| arrow-left | .icon-arrow-left |
e912 | pencil | .icon-pencil |
e91a | |
| arrow-right | .icon-arrow-right |
e913 | forward-arrow | .icon-forward-arrow |
e91b | |
| arrow-up | .icon-arrow-up |
e914 | backwards-arrow | .icon-backwards-arrow |
e91c | |
| bookmark | .icon-bookmark |
e915 | person | .icon-person |
e91d | |
| message | .icon-message |
e916 | persons | .icon-persons |
e91e | |
| mouse | .icon-mouse |
e917 | profile | .icon-profile |
e91f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| pin | .icon-pin |
e920 | popup | .icon-popup |
e928 | |
| map | .icon-map |
e921 | search | .icon-search |
e929 | |
| point | .icon-point |
e922 | printer | .icon-printer |
e92a | |
| star | .icon-star |
e923 | link | .icon-link |
e92b | |
| star-hollow | .icon-star-hollow |
e924 | flag | .icon-flag |
e92c | |
| comments | .icon-comments |
e925 | cog | .icon-cog |
e92d | |
| comment | .icon-comment |
e926 | tools | .icon-tools |
e92e | |
| home | .icon-home |
e927 | tag | .icon-tag |
e92f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| camera | .icon-camera |
e930 | timer | .icon-timer |
e938 | |
| feedback | .icon-feedback |
e931 | drag | .icon-drag |
e939 | |
| book | .icon-book |
e932 | light-bulb | .icon-light-bulb |
e93a | |
| article | .icon-article |
e933 | checklist | .icon-checklist |
e93b | |
| eye | .icon-eye |
e934 | ticket | .icon-ticket |
e93c | |
| time | .icon-time |
e935 | wi-fi | .icon-wi-fi |
e93d | |
| microphone | .icon-microphone |
e936 | line-graph | .icon-line-graph |
e93e | |
| calendar | .icon-calendar |
e937 | pie-chart | .icon-pie-chart |
e93f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| bar-graph | .icon-bar-graph |
e940 | info | .icon-info |
e948 | |
| scatter-graph | .icon-scatter-graph |
e941 | question | .icon-question |
e949 | |
| padlock-locked | .icon-padlock-locked |
e942 | warning | .icon-warning |
e94a | |
| padlock-unlocked | .icon-padlock-unlocked |
e943 | list | .icon-list |
e94b | |
| tick | .icon-tick |
e944 | add-to-list | .icon-add-to-list |
e94c | |
| cross | .icon-cross |
e945 | menu | .icon-menu |
e94d | |
| minus | .icon-minus |
e946 | grid | .icon-grid |
e94e | |
| plus | .icon-plus |
e947 | portrait | .icon-portrait |
e94f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| screens | .icon-screens |
e950 | download | .icon-download |
e958 | |
| landscape | .icon-landscape |
e951 | upload | .icon-upload |
e959 | |
| images | .icon-images |
e952 | expand | .icon-expand |
e95a | |
| media | .icon-media |
e953 | shrink | .icon-shrink |
e95b | |
| folder | .icon-folder |
e954 | volume | .icon-volume |
e95c | |
| documents | .icon-documents |
e955 | sound | .icon-sound |
e95d | |
| delete | .icon-delete |
e956 | sound-mute | .icon-sound-mute |
e95e | |
| save | .icon-save |
e957 | controls-down | .icon-controls-down |
e95f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| controls-left | .icon-controls-left |
e960 | ellipsis | .icon-ellipsis |
e968 | |
| controls-right | .icon-controls-right |
e961 | up-down | .icon-up-down |
e969 | |
| controls-up | .icon-controls-up |
e962 | controls-small-down | .icon-controls-small-down |
e96a | |
| triangle-down | .icon-triangle-down |
e963 | controls-small-left | .icon-controls-small-left |
e96b | |
| triangle-left | .icon-triangle-left |
e964 | controls-small-right | .icon-controls-small-right |
e96c | |
| triangle-right | .icon-triangle-right |
e965 | controls-small-up | .icon-controls-small-up |
e96d | |
| triangle-up | .icon-triangle-up |
e966 | radio-checked | .icon-radio-checked |
e96e | |
| dot | .icon-dot |
e967 | radio-unchecked | .icon-radio-unchecked |
e96f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| language-1 | .icon-language-1 |
e970 | arrow-down-2 | .icon-arrow-down-2 |
e978 | |
| accessibility | .icon-accessibility |
e971 | arrow-left-2 | .icon-arrow-left-2 |
e979 | |
| globe | .icon-globe |
e972 | arrow-right-2 | .icon-arrow-right-2 |
e97a | |
| language-2 | .icon-language-2 |
e973 | arrow-up-2 | .icon-arrow-up-2 |
e97b | |
| checkbox-checked | .icon-checkbox-checked |
e974 | arrow-down-3 | .icon-arrow-down-3 |
e97c | |
| checkbox-unchecked | .icon-checkbox-unchecked |
e975 | arrow-left-3 | .icon-arrow-left-3 |
e97d | |
| accessibility-2 | .icon-accessibility-2 |
e976 | arrow-right-3 | .icon-arrow-right-3 |
e97e | |
| alert | .icon-alert |
e977 | arrow-up-3 | .icon-arrow-up-3 |
e97f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| attachment | .icon-attachment |
e980 | crop | .icon-crop |
e988 | |
| block | .icon-block |
e981 | devices | .icon-devices |
e989 | |
| camera-off | .icon-camera-off |
e982 | down-up | .icon-down-up |
e98a | |
| camera-on | .icon-camera-on |
e983 | ellipsis-vertical | .icon-ellipsis-vertical |
e98b | |
| cloud | .icon-cloud |
e984 | exclamation | .icon-exclamation |
e98c | |
| compass | .icon-compass |
e985 | expand_1 | .icon-expand_1 |
e98d | |
| copy-file | .icon-copy-file |
e986 | extension | .icon-extension |
e98e | |
| copyright | .icon-copyright |
e987 | favourite | .icon-favourite |
e98f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| google-translate | .icon-google-translate |
e990 | question-circle | .icon-question-circle |
e998 | |
| hand | .icon-hand |
e991 | quote-close | .icon-quote-close |
e999 | |
| lightning | .icon-lightning |
e992 | quote-open | .icon-quote-open |
e99a | |
| list-2 | .icon-list-2 |
e993 | refresh | .icon-refresh |
e99b | |
| microphone-off | .icon-microphone-off |
e994 | send | .icon-send |
e99c | |
| move | .icon-move |
e995 | sound-down | .icon-sound-down |
e99d | |
| mute | .icon-mute |
e996 | sync | .icon-sync |
e99e | |
| ordered-list | .icon-ordered-list |
e997 | tablet | .icon-tablet |
e99f |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| thumb-down | .icon-thumb-down |
e9a0 | video-fast-forward | .icon-video-fast-forward |
e9a8 | |
| thumb-up | .icon-thumb-up |
e9a1 | video-fullscreen | .icon-video-fullscreen |
e9a9 | |
| timer-empty | .icon-timer-empty |
e9a2 | video-loop | .icon-video-loop |
e9aa | |
| timer-full | .icon-timer-full |
e9a3 | video-pause-circle | .icon-video-pause-circle |
e9ab | |
| video-captions-off-2 | .icon-video-captions-off-2 |
e9a4 | video-pause | .icon-video-pause |
e9ac | |
| video-captions-off | .icon-video-captions-off |
e9a5 | video-play-circle | .icon-video-play-circle |
e9ad | |
| video-captions | .icon-video-captions |
e9a6 | video-play | .icon-video-play |
e9ae | |
| video-exit-fullscreen | .icon-video-exit-fullscreen |
e9a7 | video-replay | .icon-video-replay |
e9af |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| video-rewind | .icon-video-rewind |
e9b0 | emotion-ok | .icon-emotion-ok |
e9b8 | |
| video-skip-back | .icon-video-skip-back |
e9b1 | emotion-sad | .icon-emotion-sad |
e9b9 | |
| video-skip-forward | .icon-video-skip-forward |
e9b2 | emotion-very-happy | .icon-emotion-very-happy |
e9ba | |
| video-stop | .icon-video-stop |
e9b3 | emotion-very-unhappy | .icon-emotion-very-unhappy |
e9bb | |
| quote-close-2 | .icon-quote-close-2 |
e9b4 | blogger-2 | .icon-blogger-2 |
e9bc | |
| quote-open-2 | .icon-quote-open-2 |
e9b5 | blogger | .icon-blogger |
e9bd | |
| emotion-happy | .icon-emotion-happy |
e9b6 | deviantart-2 | .icon-deviantart-2 |
e9be | |
| emotion-not-ok | .icon-emotion-not-ok |
e9b7 | deviantart | .icon-deviantart |
e9bf |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| doc-excel | .icon-doc-excel |
e9c0 | instagram-2 | .icon-instagram-2 |
e9c8 | |
| doc-pdf | .icon-doc-pdf |
e9c1 | .icon-instagram |
e9c9 | ||
| doc-word | .icon-doc-word |
e9c2 | linkedin-2 | .icon-linkedin-2 |
e9ca | |
| facebook-2 | .icon-facebook-2 |
e9c3 | .icon-linkedin |
e9cb | ||
.icon-facebook |
e9c4 | paypal | .icon-paypal |
e9cc | ||
| flickr-2 | .icon-flickr-2 |
e9c5 | pintrest-2 | .icon-pintrest-2 |
e9cd | |
| flickr | .icon-flickr |
e9c6 | pintrest | .icon-pintrest |
e9ce | |
| github | .icon-github |
e9c7 | qq-2 | .icon-qq-2 |
e9cf |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
.icon-qq |
e9d0 | soundcloud | .icon-soundcloud |
e9d8 | ||
| reddit-2 | .icon-reddit-2 |
e9d1 | steam-2 | .icon-steam-2 |
e9d9 | |
.icon-reddit |
e9d2 | steam | .icon-steam |
e9da | ||
| rss-2 | .icon-rss-2 |
e9d3 | trello-2 | .icon-trello-2 |
e9db | |
| rss | .icon-rss |
e9d4 | trello | .icon-trello |
e9dc | |
| sina-weibo-2 | .icon-sina-weibo-2 |
e9d5 | tumbler-2 | .icon-tumbler-2 |
e9dd | |
| sina-weibo | .icon-sina-weibo |
e9d6 | tumblr | .icon-tumblr |
e9de | |
| soundcloud-2 | .icon-soundcloud-2 |
e9d7 | twitch | .icon-twitch |
e9df |
| Icon name | CSS class name | Content ID | Icon name | CSS class name | Content ID | |
|---|---|---|---|---|---|---|
| twitter-2 | .icon-twitter-2 |
e9e0 | .icon-weibo |
e9e7 | ||
.icon-twitter |
e9e1 | xing-2 | .icon-xing-2 |
e9e8 | ||
| vimeo-2 | .icon-vimeo-2 |
e9e2 | .icon-xing |
e9e9 | ||
| vimeo | .icon-vimeo |
e9e3 | youku-2 | .icon-youku-2 |
e9ea | |
| wechat-2 | .icon-wechat-2 |
e9e4 | youku | .icon-youku |
e9eb | |
.icon-wechat |
e9e5 | youtube-2 | .icon-youtube-2 |
e9ec | ||
| weibo-2 | .icon-weibo-2 |
e9e6 | youtube | .icon-youtube |
e9ed |