Icons - adaptlearning/adapt-contrib-vanilla GitHub Wiki

Icons in Adapt

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:

icons-total

Adding icons inline

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.

Screenshot 2023-01-09 at 16 23 15

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.

Customising icons

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.

Editing existing icons

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.

Adding new icons

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.

Adding a new icon font set to Adapt

To be added.

Icon breakdown

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.

icons-01

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

icons-02

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

icons-03

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

icons-04

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

icons-05

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

icons-06

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

icons-07

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

icons-08

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

icons-09

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

icons-10

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

icons-11

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

icons-12

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

icons-13

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 instagram .icon-instagram e9c9
doc-word .icon-doc-word e9c2 linkedin-2 .icon-linkedin-2 e9ca
facebook-2 .icon-facebook-2 e9c3 linkedin .icon-linkedin e9cb
facebook .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

icons-14

Icon name CSS class name Content ID Icon name CSS class name Content ID
qq .icon-qq e9d0 soundcloud .icon-soundcloud e9d8
reddit-2 .icon-reddit-2 e9d1 steam-2 .icon-steam-2 e9d9
reddit .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

icons-15

Icon name CSS class name Content ID Icon name CSS class name Content ID
twitter-2 .icon-twitter-2 e9e0 weibo .icon-weibo e9e7
twitter .icon-twitter e9e1 xing-2 .icon-xing-2 e9e8
vimeo-2 .icon-vimeo-2 e9e2 xing .icon-xing e9e9
vimeo .icon-vimeo e9e3 youku-2 .icon-youku-2 e9ea
wechat-2 .icon-wechat-2 e9e4 youku .icon-youku e9eb
wechat .icon-wechat e9e5 youtube-2 .icon-youtube-2 e9ec
weibo-2 .icon-weibo-2 e9e6 youtube .icon-youtube e9ed
⚠️ **GitHub.com Fallback** ⚠️