Icons

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:

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.

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.

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

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

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