5 Icons

Icons

An icon font set has been curated that is specific to Toyota's requirements. this should be used at all times.

Load speed & file size

Previously, Toyota used image sprites to render icons on the web. By using a font instead we can load in the icons once and use CSS to change their look for hover and active states.

Scalability

By using a font instead we can render our icons, we can scale them to any size and they will not lose any quality. They also look aesthetically pleasing on retina displays (or displays of any size and resolution).

Design flexibility

Using a font to render icons will enable us

When the new CSS will be active on the live site, you can access the here: https://www.toyota-europe.com.cache.rsb.bstd.ru/fonts/toyota-icon-restyle/Toyota-icon-restyle.ttf For now you can temporarily access this file here: : http://t1-acceptance-client-v7.herokuapp.com/fonts/toyota-icon-restyle/Toyota-icon-restyle.ttf

NOTE:

Any items suffixed by CORE may be used by any NMSCs or 3rd party of the T1 project. Any item that don't have the CORE suffix or that are suffixed by EXTENDED are reserved to the "t1-client" & "t1-server" project and might evolved in a non-expected way for anyone using them out of those two projects.

5.1 Toyota-icon-restyle - CORE

  • icon-android \e900
  • icon-angle-down \e901
  • icon-angle-left \e902
  • icon-angle-right \e903
  • icon-angle-up \e904
  • icon-apple \e905
  • icon-backwards \e906
  • icon-bluetooth \e907
  • icon-book pending
  • icon-bookmark \e908
  • icon-calculator \e90a
  • icon-calendar \e90b
  • icon-camera \e90c
  • icon-car \e90d
  • icon-car-rental \e90f
  • icon-car-used \e910
  • icon-checkbox-checked \e911
  • icon-checkbox-unchecked \e912
  • icon-chevron-down \e913
  • icon-chevron-left \e914
  • icon-chevron-right \e915
  • icon-chevron-up \e916
  • icon-cog \e917
  • icon-compare \e918
  • icon-consumptions \e919
  • icon-desktop \e91a
  • icon-download-alt \e91b
  • icon-email \e91c
  • icon-emission \e91d
  • icon-envelope-alt \e91e
  • icon-exclamation \e91f
  • icon-external-link \e920
  • icon-facebook \e921
  • icon-facetime-video \e922
  • icon-file-alt \e923
  • icon-file-pdf \e924
  • icon-find-your-match \e927
  • icon-flickr \e928
  • icon-folder-case \e929
  • icon-forward \e92a
  • icon-fuel-type \e92b
  • icon-google-plus \e92c
  • icon-heart \e92d
  • icon-hybrid \e92e
  • icon-info-sign \e92f
  • icon-insurance \e931
  • icon-ipod \e932
  • icon-laptop \e934
  • icon-link \e935
  • icon-list-ul \e936
  • icon-live-chat \e937
  • icon-locate \e938
  • icon-lock \e939
  • icon-map-marker \e93b
  • icon-menu \e93c
  • icon-minus \e93d
  • icon-mobile \e93e
  • icon-music \e93f
  • icon-new-2 \e940
  • icon-newsletter \e941
  • icon-ok \e942
  • icon-pause \e943
  • icon-phone \e944
  • icon-picture \e945
  • icon-play \e946
  • icon-plug \e947
  • icon-plus \e948
  • icon-print \e949
  • icon-question-sign \e94a
  • icon-quote-left \e94b
  • icon-quote-right \e94c
  • icon-radio-checked \e94d
  • icon-radio-unchecked \e94e
  • icon-rain \e94f
  • icon-refresh \e950
  • icon-remove \e951
  • icon-reorder \e952
  • icon-repeat \e953
  • icon-reply \e954
  • icon-reset \e955
  • icon-resize-full \e956
  • icon-resize-small \e957
  • icon-rss \e958
  • icon-search \e959
  • icon-share \e95b
  • icon-skip-backward \e95c
  • icon-skip-forward \e95d
  • icon-snowflake \e95e
  • icon-star \e95f
  • icon-star-half \e960
  • icon-step-backward \e961
  • icon-step-forward \e962
  • icon-stop \e963
  • icon-sun-stroke \e964
  • icon-tablet \e965
  • icon-tag \e966
  • icon-test-drive \e967
  • icon-th-large \e968
  • icon-thumbs-up \e969
  • icon-trash \e96a
  • icon-tsm \e96b
  • icon-twitter \e96c
  • icon-upload-alt \e96d
  • icon-usb1 \e96e
  • icon-user \e970
  • icon-volume-down \e971
  • icon-volume-off \e972
  • icon-volume-up \e973
  • icon-windows \e975
  • icon-youtube \e976
  • icon-price-alt \e977
  • icon-filter \e978
  • icon-star-alt \e979
  • icon-transport \e97a
  • icon-cone \e97b
  • icon-insurance-alt \e97c
  • icon-exchange \e97d
  • icon-info-sign-thin \e97e
  • icon-cross \e97f
  • icon-horizontal-ellipsis \e980
  • icon-quote-right-thin \e981
  • icon-quote-left-thin \e982
  • icon-phone-thin \e983
  • icon-car-side-view \e984
  • icon-weather-conditions-rain \e985
  • icon-corporate-person \e986
  • icon-client \e987
  • icon-list \e988
  • icon-fuel-bucket \e989
<ul class="icons">
	<li>
		<span class="icon icon-android"></span>
		icon-android
		<span class="uni">\e900</span>
	</li>
	<li>
		<span class="icon icon-angle-down"></span>
		icon-angle-down
		<span class="uni">\e901</span>
	</li>
	<li>
		<span class="icon icon-angle-left"></span>
		icon-angle-left
		<span class="uni">\e902</span>
	</li>
	<li>
		<span class="icon icon-angle-right"></span>
		icon-angle-right
		<span class="uni">\e903</span>
	</li>
	<li>
		<span class="icon icon-angle-up"></span>
		icon-angle-up
		<span class="uni">\e904</span>
	</li>
	<li>
		<span class="icon icon-apple"></span>
		icon-apple
		<span class="uni">\e905</span>
	</li>
	<li>
		<span class="icon icon-backwards"></span>
		icon-backwards
		<span class="uni">\e906</span>
	</li>
	<li>
		<span class="icon icon-bluetooth"></span>
		icon-bluetooth
		<span class="uni">\e907</span>
	</li>
	<li>
		<span class="icon icon-book"></span>
		icon-book
		<span class="uni">pending</span>
	</li>
	<li>
		<span class="icon icon-bookmark"></span>
		icon-bookmark
		<span class="uni">\e908</span>
	</li>
	<li>
		<span class="icon icon-calculator"></span>
		icon-calculator
		<span class="uni">\e90a</span>
	</li>
	<li>
		<span class="icon icon-calendar"></span>
		icon-calendar
		<span class="uni">\e90b</span>
	</li>
	<li>
		<span class="icon icon-camera"></span>
		icon-camera
		<span class="uni">\e90c</span>
	</li>
	<li>
		<span class="icon icon-car"></span>
		icon-car
		<span class="uni">\e90d</span>
	</li>
	<li>
		<span class="icon icon-car-rental"></span>
		icon-car-rental
		<span class="uni">\e90f</span>
	</li>
	<li>
		<span class="icon icon-car-used"></span>
		icon-car-used
		<span class="uni">\e910</span>
	</li>
	<li>
		<span class="icon icon-checkbox-checked"></span>
		icon-checkbox-checked
		<span class="uni">\e911</span>
	</li>
	<li>
		<span class="icon icon-checkbox-unchecked"></span>
		icon-checkbox-unchecked
		<span class="uni">\e912</span>
	</li>
	<li>
		<span class="icon icon-chevron-down"></span>
		icon-chevron-down
		<span class="uni">\e913</span>
	</li>
	<li>
		<span class="icon icon-chevron-left"></span>
		icon-chevron-left
		<span class="uni">\e914</span>
	</li>
	<li>
		<span class="icon icon-chevron-right"></span>
		icon-chevron-right
		<span class="uni">\e915</span>
	</li>
	<li>
		<span class="icon icon-chevron-up"></span>
		icon-chevron-up
		<span class="uni">\e916</span>
	</li>
	<li>
		<span class="icon icon-cog"></span>
		icon-cog
		<span class="uni">\e917</span>
	</li>
	<li>
		<span class="icon icon-compare"></span>
		icon-compare
		<span class="uni">\e918</span>
	</li>
	<li>
		<span class="icon icon-consumptions"></span>
		icon-consumptions
		<span class="uni">\e919</span>
	</li>
	<li>
		<span class="icon icon-desktop"></span>
		icon-desktop
		<span class="uni">\e91a</span>
	</li>
	<li>
		<span class="icon icon-download-alt"></span>
		icon-download-alt
		<span class="uni">\e91b</span>
	</li>
	<li>
		<span class="icon icon-email"></span>
		icon-email
		<span class="uni">\e91c</span>
	</li>
	<li>
		<span class="icon icon-emission"></span>
		icon-emission
		<span class="uni">\e91d</span>
	</li>
	<li>
		<span class="icon icon-envelope-alt"></span>
		icon-envelope-alt
		<span class="uni">\e91e</span>
	</li>
	<li>
		<span class="icon icon-exclamation"></span>
		icon-exclamation
		<span class="uni">\e91f</span>
	</li>
	<li>
		<span class="icon icon-external-link"></span>
		icon-external-link
		<span class="uni">\e920</span>
	</li>
	<li>
		<span class="icon icon-facebook"></span>
		icon-facebook
		<span class="uni">\e921</span>
	</li>
	<li>
		<span class="icon icon-facetime-video"></span>
		icon-facetime-video
		<span class="uni">\e922</span>
	</li>
	<li>
		<span class="icon icon-file-alt"></span>
		icon-file-alt
		<span class="uni">\e923</span>
	</li>
	<li>
		<span class="icon icon-file-pdf"></span>
		icon-file-pdf
		<span class="uni">\e924</span>
	</li>
	<li>
		<span class="icon icon-find-your-match"></span>
		icon-find-your-match
		<span class="uni">\e927</span>
	</li>
	<li>
		<span class="icon icon-flickr"></span>
		icon-flickr
		<span class="uni">\e928</span>
	</li>
	<li>
		<span class="icon icon-folder-case"></span>
		icon-folder-case
		<span class="uni">\e929</span>
	</li>
	<li>
		<span class="icon icon-forward"></span>
		icon-forward
		<span class="uni">\e92a</span>
	</li>
	<li>
		<span class="icon icon-fuel-type"></span>
		icon-fuel-type
		<span class="uni">\e92b</span>
	</li>
	<li>
		<span class="icon icon-google-plus"></span>
		icon-google-plus
		<span class="uni">\e92c</span>
	</li>
	<li>
		<span class="icon icon-heart"></span>
		icon-heart
		<span class="uni">\e92d</span>
	</li>
	<li>
		<span class="icon icon-hybrid"></span>
		icon-hybrid
		<span class="uni">\e92e</span>
	</li>
	<li>
		<span class="icon icon-info-sign"></span>
		icon-info-sign
		<span class="uni">\e92f</span>
	</li>
	<li>
		<span class="icon icon-insurance"></span>
		icon-insurance
		<span class="uni">\e931</span>
	</li>
	<li>
		<span class="icon icon-ipod"></span>
		icon-ipod
		<span class="uni">\e932</span>
	</li>
	<li>
		<span class="icon icon-laptop"></span>
		icon-laptop
		<span class="uni">\e934</span>
	</li>
	<li>
		<span class="icon icon-link"></span>
		icon-link
		<span class="uni">\e935</span>
	</li>
	<li>
		<span class="icon icon-list-ul"></span>
		icon-list-ul
		<span class="uni">\e936</span>
	</li>
	<li>
		<span class="icon icon-live-chat"></span>
		icon-live-chat
		<span class="uni">\e937</span>
	</li>
	<li>
		<span class="icon icon-locate"></span>
		icon-locate
		<span class="uni">\e938</span>
	</li>
	<li>
		<span class="icon icon-lock"></span>
		icon-lock
		<span class="uni">\e939</span>
	</li>
	<li>
		<span class="icon icon-map-marker"></span>
		icon-map-marker
		<span class="uni">\e93b</span>
	</li>
	<li>
		<span class="icon icon-menu"></span>
		icon-menu
		<span class="uni">\e93c</span>
	</li>
	<li>
		<span class="icon icon-minus"></span>
		icon-minus
		<span class="uni">\e93d</span>
	</li>
	<li>
		<span class="icon icon-mobile"></span>
		icon-mobile
		<span class="uni">\e93e</span>
	</li>
	<li>
		<span class="icon icon-music"></span>
		icon-music
		<span class="uni">\e93f</span>
	</li>
	<li>
		<span class="icon icon-new-2"></span>
		icon-new-2
		<span class="uni">\e940</span>
	</li>
	<li>
		<span class="icon icon-newsletter"></span>
		icon-newsletter
		<span class="uni">\e941</span>
	</li>
	<li>
		<span class="icon icon-ok"></span>
		icon-ok
		<span class="uni">\e942</span>
	</li>
	<li>
		<span class="icon icon-pause"></span>
		icon-pause
		<span class="uni">\e943</span>
	</li>
	<li>
		<span class="icon icon-phone"></span>
		icon-phone
		<span class="uni">\e944</span>
	</li>
	<li>
		<span class="icon icon-picture"></span>
		icon-picture
		<span class="uni">\e945</span>
	</li>
	<li>
		<span class="icon icon-play"></span>
		icon-play
		<span class="uni">\e946</span>
	</li>
	<li>
		<span class="icon icon-plug"></span>
		icon-plug
		<span class="uni">\e947</span>
	</li>
	<li>
		<span class="icon icon-plus"></span>
		icon-plus
		<span class="uni">\e948</span>
	</li>
	<li>
		<span class="icon icon-print"></span>
		icon-print
		<span class="uni">\e949</span>
	</li>
	<li>
		<span class="icon icon-question-sign"></span>
		icon-question-sign
		<span class="uni">\e94a</span>
	</li>
	<li>
		<span class="icon icon-quote-left"></span>
		icon-quote-left
		<span class="uni">\e94b</span>
	</li>
	<li>
		<span class="icon icon-quote-right"></span>
		icon-quote-right
		<span class="uni">\e94c</span>
	</li>
	<li>
		<span class="icon icon-radio-checked"></span>
		icon-radio-checked
		<span class="uni">\e94d</span>
	</li>
	<li>
		<span class="icon icon-radio-unchecked"></span>
		icon-radio-unchecked
		<span class="uni">\e94e</span>
	</li>
	<li>
		<span class="icon icon-rain"></span>
		icon-rain
		<span class="uni">\e94f</span>
	</li>
	<li>
		<span class="icon icon-refresh"></span>
		icon-refresh
		<span class="uni">\e950</span>
	</li>
	<li>
		<span class="icon icon-remove"></span>
		icon-remove
		<span class="uni">\e951</span>
	</li>
	<li>
		<span class="icon icon-reorder"></span>
		icon-reorder
		<span class="uni">\e952</span>
	</li>
	<li>
		<span class="icon icon-repeat"></span>
		icon-repeat
		<span class="uni">\e953</span>
	</li>
	<li>
		<span class="icon icon-reply"></span>
		icon-reply
		<span class="uni">\e954</span>
	</li>
	<li>
		<span class="icon icon-reset"></span>
		icon-reset
		<span class="uni">\e955</span>
	</li>
	<li>
		<span class="icon icon-resize-full"></span>
		icon-resize-full
		<span class="uni">\e956</span>
	</li>
	<li>
		<span class="icon icon-resize-small"></span>
		icon-resize-small
		<span class="uni">\e957</span>
	</li>
	<li>
		<span class="icon icon-rss"></span>
		icon-rss
		<span class="uni">\e958</span>
	</li>
	<li>
		<span class="icon icon-search"></span>
		icon-search
		<span class="uni">\e959</span>
	</li>
	<li>
		<span class="icon icon-share"></span>
		icon-share
		<span class="uni">\e95b</span>
	</li>
	<li>
		<span class="icon icon-skip-backward"></span>
		icon-skip-backward
		<span class="uni">\e95c</span>
	</li>
	<li>
		<span class="icon icon-skip-forward"></span>
		icon-skip-forward
		<span class="uni">\e95d</span>
	</li>
	<li>
		<span class="icon icon-snowflake"></span>
		icon-snowflake
		<span class="uni">\e95e</span>
	</li>
	<li>
		<span class="icon icon-star"></span>
		icon-star
		<span class="uni">\e95f</span>
	</li>
	<li>
		<span class="icon icon-star-half"></span>
		icon-star-half
		<span class="uni">\e960</span>
	</li>
	<li>
		<span class="icon icon-step-backward"></span>
		icon-step-backward
		<span class="uni">\e961</span>
	</li>
	<li>
		<span class="icon icon-step-forward"></span>
		icon-step-forward
		<span class="uni">\e962</span>
	</li>
	<li>
		<span class="icon icon-stop"></span>
		icon-stop
		<span class="uni">\e963</span>
	</li>
	<li>
		<span class="icon icon-sun-stroke"></span>
		icon-sun-stroke
		<span class="uni">\e964</span>
	</li>
	<li>
		<span class="icon icon-tablet"></span>
		icon-tablet
		<span class="uni">\e965</span>
	</li>
	<li>
		<span class="icon icon-tag"></span>
		icon-tag
		<span class="uni">\e966</span>
	</li>
	<li>
		<span class="icon icon-test-drive"></span>
		icon-test-drive
		<span class="uni">\e967</span>
	</li>
	<li>
		<span class="icon icon-th-large"></span>
		icon-th-large
		<span class="uni">\e968</span>
	</li>
	<li>
		<span class="icon icon-thumbs-up"></span>
		icon-thumbs-up
		<span class="uni">\e969</span>
	</li>
	<li>
		<span class="icon icon-trash"></span>
		icon-trash
		<span class="uni">\e96a</span>
	</li>
	<li>
		<span class="icon icon-tsm"></span>
		icon-tsm
		<span class="uni">\e96b</span>
	</li>
	<li>
		<span class="icon icon-twitter"></span>
		icon-twitter
		<span class="uni">\e96c</span>
	</li>
	<li>
		<span class="icon icon-upload-alt"></span>
		icon-upload-alt
		<span class="uni">\e96d</span>
	</li>
	<li>
		<span class="icon icon-usb1"></span>
		icon-usb1
		<span class="uni">\e96e</span>
	</li>
	<li>
		<span class="icon icon-user"></span>
		icon-user
		<span class="uni">\e970</span>
	</li>
	<li>
		<span class="icon icon-volume-down"></span>
		icon-volume-down
		<span class="uni">\e971</span>
	</li>
	<li>
		<span class="icon icon-volume-off"></span>
		icon-volume-off
		<span class="uni">\e972</span>
	</li>
	<li>
		<span class="icon icon-volume-up"></span>
		icon-volume-up
		<span class="uni">\e973</span>
	</li>
	<li>
		<span class="icon icon-windows"></span>
		icon-windows
		<span class="uni">\e975</span>
	</li>
	<li>
		<span class="icon icon-youtube"></span>
		icon-youtube
		<span class="uni">\e976</span>
	</li>
	<li>
		<span class="icon icon-price-alt"></span>
		icon-price-alt
		<span class="uni">\e977</span>
	</li>
	<li>
		<span class="icon icon-filter"></span>
		icon-filter
		<span class="uni">\e978</span>
	</li>
	<li>
		<span class="icon icon-star-alt"></span>
		icon-star-alt
		<span class="uni">\e979</span>
	</li>
	<li>
		<span class="icon icon-transport"></span>
		icon-transport
		<span class="uni">\e97a</span>
	</li>
	<li>
		<span class="icon icon-cone"></span>
		icon-cone
		<span class="uni">\e97b</span>
	</li>
	<li>
		<span class="icon icon-insurance-alt"></span>
		icon-insurance-alt
		<span class="uni">\e97c</span>
	</li>
	<li>
		<span class="icon icon-exchange"></span>
		icon-exchange
		<span class="uni">\e97d</span>
	</li>
	<li>
		<span class="icon icon-info-sign-thin"></span>
		icon-info-sign-thin
		<span class="uni">\e97e</span>
	</li>
	<li>
		<span class="icon icon-cross"></span>
		icon-cross
		<span class="uni">\e97f</span>
	</li>
	<li>
		<span class="icon icon-horizontal-ellipsis"></span>
		icon-horizontal-ellipsis
		<span class="uni">\e980</span>
	</li>

	<li>
		<span class="icon icon-quote-right-thin"></span>
		icon-quote-right-thin
		<span class="uni">\e981</span>
	</li>
	<li>
		<span class="icon icon-quote-left-thin"></span>
		icon-quote-left-thin
		<span class="uni">\e982</span>
	</li>
	<li>
		<span class="icon icon-phone-thin"></span>
		icon-phone-thin
		<span class="uni">\e983</span>
	</li>
	<li>
		<span class="icon icon-car-side-view"></span>
		icon-car-side-view
		<span class="uni">\e984</span>
	</li>
	<li>
		<span class="icon icon-weather-conditions-rain"></span>
		icon-weather-conditions-rain
		<span class="uni">\e985</span>
	</li>
	<li>
		<span class="icon icon-corporate-person"></span>
		icon-corporate-person
		<span class="uni">\e986</span>
	</li>
	<li>
		<span class="icon icon-client"></span>
		icon-client
		<span class="uni">\e987</span>
	</li>
	<li>
		<span class="icon icon-list"></span>
		icon-list
		<span class="uni">\e988</span>
	</li>
	<li>
		<span class="icon icon-fuel-bucket"></span>
		icon-fuel-bucket
		<span class="uni">\e989</span>
	</li>
</ul>

5.2 Toyota-icon-restyle-large - CORE

  • icon-engine \e901
  • icon-engine-hybrid \e901
  • icon-engine-diesel \e902
  • icon-engine-hybrid-hydrogen \e903
  • icon-engine-petrol \e904
<ul class="icons">
	<li>
		<span class="icon-large icon-engine"></span>
		icon-engine
		<span class="uni">\e901</span>
	</li>
	<li>
		<span class="icon-large icon-engine-hybrid"></span>
		icon-engine-hybrid
		<span class="uni">\e901</span>
	</li>
	<li>
		<span class="icon-large icon-engine-diesel"></span>
		icon-engine-diesel
		<span class="uni">\e902</span>
	</li>
	<li>
		<span class="icon-large icon-engine-hybrid-hydrogen"></span>
		icon-engine-hybrid-hydrogen
		<span class="uni">\e903</span>
	</li>
	<li>
		<span class="icon-large icon-engine-petrol"></span>
		icon-engine-petrol
		<span class="uni">\e904</span>
	</li>
</ul>

5.3 Toyota-icon-car - CORE

  • icon-car-4x4 \e900
  • icon-car-commercial \e901
  • icon-car-doors-2 \e902
  • icon-car-doors-3 \e903
  • icon-car-doors-4 \e904
  • icon-car-doors-5 \e905
  • icon-car-family \e906
  • icon-car-hybrid \e907
  • icon-car-peoplecarrier \e908
  • icon-car-small \e909
  • icon-car-sports \e90a
  • icon-car-suv \e90b
<ul class="icons">
	<li>
		<span class="icon-cc icon-car-4x4"></span>
		icon-car-4x4
		<span class="uni">\e900</span>
	</li>
	<li>
		<span class="icon-cc icon-car-commercial"></span>
		icon-car-commercial
		<span class="uni">\e901</span>
	</li>
	<li>
		<span class="icon-cc icon-car-doors-2"></span>
		icon-car-doors-2
		<span class="uni">\e902</span>
	</li>
	<li>
		<span class="icon-cc icon-car-doors-3"></span>
		icon-car-doors-3
		<span class="uni">\e903</span>
	</li>
	<li>
		<span class="icon-cc icon-car-doors-4"></span>
		icon-car-doors-4
		<span class="uni">\e904</span>
	</li>
	<li>
		<span class="icon-cc icon-car-doors-5"></span>
		icon-car-doors-5
		<span class="uni">\e905</span>
	</li>
	<li>
		<span class="icon-cc icon-car-family"></span>
		icon-car-family
		<span class="uni">\e906</span>
	</li>
	<li>
		<span class="icon-cc icon-car-hybrid"></span>
		icon-car-hybrid
		<span class="uni">\e907</span>
	</li>
	<li>
		<span class="icon-cc icon-car-peoplecarrier"></span>
		icon-car-peoplecarrier
		<span class="uni">\e908</span>
	</li>
	<li>
		<span class="icon-cc icon-car-small"></span>
		icon-car-small
		<span class="uni">\e909</span>
	</li>
	<li>
		<span class="icon-cc icon-car-sports"></span>
		icon-car-sports
		<span class="uni">\e90a</span>
	</li>
	<li>
		<span class="icon-cc icon-car-suv"></span>
		icon-car-suv
		<span class="uni">\e90b</span>
	</li>
</ul>

5.4 Toyota-icon-service - CORE

  • icon-bodyshop, icon-paintshop, icon-body-and-paint \e60d
  • icon-walk-around-check \e60e
  • icon-fastfit, icon-express-service \e613
  • icon-partsshop, icon-genuine-parts \e60f
  • icon-priusdealer, icon-hybrid-health-check \e608
  • icon-topcar, icon-workshop, icon-service-and-maintenance \e614
  • icon-toyotarentcars, icon-rentcars, icon-rental-car \e616
  • icon-usedcars, icon-used-car \e617
  • icon-wheels-tyres \e905
<ul class="icons">
	<li>
		<span class="icon-service icon-bodyshop"></span>
		<span class="icon-service icon-paintshop"></span>
		<span class="icon-service icon-body-and-paint"></span>
		icon-bodyshop, icon-paintshop, icon-body-and-paint
		<span class="uni">\e60d</span>
	</li>
	<li>
		<span class="icon-service icon-walk-around-check"></span>
		icon-walk-around-check
		<span class="uni">\e60e</span>
	</li>
	<li>
		<span class="icon-service icon-fastfit"></span>
		<span class="icon-service icon-express-service"></span>
		icon-fastfit, icon-express-service
		<span class="uni">\e613</span>
	</li>
	<li>
		<span class="icon-service icon-partsshop"></span>
		<span class="icon-service icon-genuine-parts"></span>
		icon-partsshop, icon-genuine-parts
		<span class="uni">\e60f</span>
	</li>
	<li>
		<span class="icon-service icon-priusdealer"></span>
		<span class="icon-service icon-hybrid-health-check"></span>
		icon-priusdealer, icon-hybrid-health-check
		<span class="uni">\e608</span>
	</li>
	<li>
		<span class="icon-service icon-topcar"></span>
		<span class="icon-service icon-workshop"></span>
		<span class="icon-service icon-service-and-maintenance"></span>
		icon-topcar, icon-workshop, icon-service-and-maintenance
		<span class="uni">\e614</span>
	</li>
	<li>
		<span class="icon-service icon-toyotarentcars"></span>
		<span class="icon-service icon-rentcars"></span>
		<span class="icon-service icon-rental-car"></span>
		icon-toyotarentcars, icon-rentcars, icon-rental-car
		<span class="uni">\e616</span>
	</li>
	<li>
		<span class="icon-service icon-usedcars"></span>
		<span class="icon-service icon-used-car"></span>
		icon-usedcars, icon-used-car
		<span class="uni">\e617</span>
	</li>
	<li>
		<span class="icon-service icon-wheels-tyres"></span>
		icon-wheels-tyres
		<span class="uni">\e905</span>
	</li>
</ul>

5.5 Bootstrap glyphicons - CORE

Bootstrap 3 -the main frontend framework the T1 project relies on- offers a large panel of icons and utility classes that can be used.

Note :

More glyphicons are supported on the latest bootstrap 3.X sub-versions and won't necessarily work on the T1 sites.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
<!-- This is a rough copy paste from https://getbootstrap.com/docs/3.3/components/ Note we are using bootstrap-sass 3.1.1 so not all bootstrap 3.3 glyphicons are listed here -->
<ul class="icons">
    <li> <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-asterisk</span> </li>
    <li> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-plus</span> </li>
    <li> <span class="glyphicon glyphicon-euro" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-euro</span> </li>

    <!-- The following icon is probably only supported from bootstrap 3.3 while we are still using bootstrap-sass 3.1.1 -->
    <!--
    <li> <span class="glyphicon glyphicon-eur" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-minus</span> </li>
    -->
    <li> <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cloud</span> </li>
    <li> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-envelope</span> </li>
    <li> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-pencil</span> </li>
    <li> <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-glass</span> </li>
    <li> <span class="glyphicon glyphicon-music" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-search</span> </li>
    <li> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-heart</span> </li>
    <li> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-star</span> </li>
    <li> <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-star-empty</span> </li>
    <li> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-user</span> </li>
    <li> <span class="glyphicon glyphicon-film" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-film</span> </li>
    <li> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-th-large</span> </li>
    <li> <span class="glyphicon glyphicon-th" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-th</span> </li>
    <li> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-th-list</span> </li>
    <li> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ok</span> </li>
    <li> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-remove</span> </li>
    <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span> </li>
    <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span> </li>
    <li> <span class="glyphicon glyphicon-off" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-off</span> </li>
    <li> <span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-signal</span> </li>
    <li> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cog</span> </li>
    <li> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-trash</span> </li>
    <li> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-home</span> </li>
    <li> <span class="glyphicon glyphicon-file" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-file</span> </li>
    <li> <span class="glyphicon glyphicon-time" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-time</span> </li>
    <li> <span class="glyphicon glyphicon-road" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-road</span> </li>
    <li> <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-download-alt</span> </li>
    <li> <span class="glyphicon glyphicon-download" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-download</span> </li>
    <li> <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-upload</span> </li>
    <li> <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-inbox</span> </li>
    <li> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-play-circle</span> </li>
    <li> <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-repeat</span> </li>
    <li> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-refresh</span> </li>
    <li> <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-list-alt</span> </li>
    <li> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-headphones</span> </li>
    <li> <span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-volume-off</span> </li>
    <li> <span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-volume-down</span> </li>
    <li> <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-volume-up</span> </li>
    <li> <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-qrcode</span> </li>
    <li> <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-barcode</span> </li>
    <li> <span class="glyphicon glyphicon-tag" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tags</span> </li>
    <li> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-book</span> </li>
    <li> <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bookmark</span> </li>
    <li> <span class="glyphicon glyphicon-print" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-print</span> </li>
    <li> <span class="glyphicon glyphicon-camera" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-camera</span> </li>
    <li> <span class="glyphicon glyphicon-font" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-font</span> </li>
    <li> <span class="glyphicon glyphicon-bold" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bold</span> </li>
    <li> <span class="glyphicon glyphicon-italic" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-italic</span> </li>
    <li> <span class="glyphicon glyphicon-text-height" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-text-height</span> </li>
    <li> <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-text-width</span> </li>
    <li> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-align-left</span> </li>
    <li> <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-align-center</span> </li>
    <li> <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-align-right</span> </li>
    <li> <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-align-justify</span> </li>
    <li> <span class="glyphicon glyphicon-list" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-indent-left</span> </li>
    <li> <span class="glyphicon glyphicon-indent-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-indent-right</span> </li>
    <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span> </li>
    <li> <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-picture</span> </li>
    <li> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-map-marker</span> </li>
    <li> <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-adjust</span> </li>
    <li> <span class="glyphicon glyphicon-tint" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-check</span> </li>
    <li> <span class="glyphicon glyphicon-move" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-move</span> </li>
    <li> <span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-step-backward</span> </li>
    <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span> </li>
    <li> <span class="glyphicon glyphicon-backward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-backward</span> </li>
    <li> <span class="glyphicon glyphicon-play" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-stop</span> </li>
    <li> <span class="glyphicon glyphicon-forward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-forward</span> </li>
    <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span> </li>
    <li> <span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-step-forward</span> </li>
    <li> <span class="glyphicon glyphicon-eject" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-eject</span> </li>
    <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span> </li>
    <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span> </li>
    <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span> </li>
    <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span> </li>
    <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span> </li>
    <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span> </li>
    <li> <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-question-sign</span> </li>
    <li> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-info-sign</span> </li>
    <li> <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-screenshot</span> </li>
    <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span> </li>
    <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span> </li>
    <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span> </li>
    <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span> </li>
    <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span> </li>
    <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span> </li>
    <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span> </li>
    <li> <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-share-alt</span> </li>
    <li> <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-resize-full</span> </li>
    <li> <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-resize-small</span> </li>
    <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span> </li>
    <li> <span class="glyphicon glyphicon-gift" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-gift</span> </li>
    <li> <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-eye-open</span> </li>
    <li> <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-eye-close</span> </li>
    <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-warning-sign</span> </li>
    <li> <span class="glyphicon glyphicon-plane" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-plane</span> </li>
    <li> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-calendar</span> </li>
    <li> <span class="glyphicon glyphicon-random" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-magnet</span> </li>
    <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span> </li>
    <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span> </li>
    <li> <span class="glyphicon glyphicon-retweet" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-retweet</span> </li>
    <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span> </li>
    <li> <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-folder-close</span> </li>
    <li> <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-folder-open</span> </li>
    <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span> </li>
    <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span> </li>
    <li> <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hdd</span> </li>
    <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span> </li>
    <li> <span class="glyphicon glyphicon-bell" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bell</span> </li>
    <li> <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-certificate</span> </li>
    <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span> </li>
    <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span> </li>
    <li> <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hand-right</span> </li>
    <li> <span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hand-left</span> </li>
    <li> <span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hand-up</span> </li>
    <li> <span class="glyphicon glyphicon-hand-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hand-down</span> </li>
    <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span> </li>
    <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tasks</span> </li>
    <li> <span class="glyphicon glyphicon-filter" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-briefcase</span> </li>
    <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span> </li>
    <li> <span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-dashboard</span> </li>
    <li> <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-paperclip</span> </li>
    <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span> </li>
    <li> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-link</span> </li>
    <li> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-usd</span> </li>
    <li> <span class="glyphicon glyphicon-gbp" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-gbp</span> </li>
    <li> <span class="glyphicon glyphicon-sort" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span> </li>
    <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span> </li>
    <li> <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-unchecked</span> </li>
    <li> <span class="glyphicon glyphicon-expand" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span> </li>
    <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span> </li>
    <li> <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-log-in</span> </li>
    <li> <span class="glyphicon glyphicon-flash" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-flash</span> </li>
    <li> <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-log-out</span> </li>
    <li> <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-new-window</span> </li>
    <li> <span class="glyphicon glyphicon-record" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-record</span> </li>
    <li> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-save</span> </li>
    <li> <span class="glyphicon glyphicon-open" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-open</span> </li>
    <li> <span class="glyphicon glyphicon-saved" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-saved</span> </li>
    <li> <span class="glyphicon glyphicon-import" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-import</span> </li>
    <li> <span class="glyphicon glyphicon-export" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-export</span> </li>
    <li> <span class="glyphicon glyphicon-send" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-send</span> </li>
    <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span> </li>
    <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span> </li>
    <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-floppy-save</span> </li>
    <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-floppy-open</span> </li>
    <li> <span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-credit-card</span> </li>
    <li> <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-transfer</span> </li>
    <li> <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cutlery</span> </li>
    <li> <span class="glyphicon glyphicon-header" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-header</span> </li>
    <li> <span class="glyphicon glyphicon-compressed" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-compressed</span> </li>
    <li> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-earphone</span> </li>
    <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span> </li>
    <li> <span class="glyphicon glyphicon-tower" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tower</span> </li>
    <li> <span class="glyphicon glyphicon-stats" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-stats</span> </li>
    <li> <span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sd-video</span></li>
    <li> <span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-subtitles</span> </li>
    <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span> </li>
    <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span> </li>
    <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span> </li>
    <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span> </li>
    <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span> </li>
    <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span> </li>
    <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span> </li>
    <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span> </li>
    <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span> </li>
    <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span> </li>
    <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span> </li>

    <!-- The following icons are probably only supported from bootstrap 3.3 while we are still using bootstrap-sass 3.1.1 -->
    <!--
    <li> <span class="glyphicon glyphicon-cd" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-save-file</span> </li>
    <li> <span class="glyphicon glyphicon-open-file" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-open-file</span> </li>
    <li> <span class="glyphicon glyphicon-level-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-level-up</span> </li>
    <li> <span class="glyphicon glyphicon-copy" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-copy</span> </li>
    <li> <span class="glyphicon glyphicon-paste" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-alert</span> </li>
    <li> <span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-equalizer</span> </li>
    <li> <span class="glyphicon glyphicon-king" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-queen</span> </li>
    <li> <span class="glyphicon glyphicon-pawn" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-pawn</span> </li>
    <li> <span class="glyphicon glyphicon-bishop" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-knight</span> </li>
    <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-baby-formula</span> </li>
    <li> <span class="glyphicon glyphicon-tent" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-tent</span> </li>
    <li> <span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-blackboard</span> </li>
    <li> <span class="glyphicon glyphicon-bed" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bed</span> </li>
    <li> <span class="glyphicon glyphicon-apple" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-apple</span> </li>
    <li> <span class="glyphicon glyphicon-erase" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-erase</span> </li>
    <li> <span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-hourglass</span> </li>
    <li> <span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-lamp</span> </li>
    <li> <span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-duplicate</span> </li>
    <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-piggy-bank</span> </li>
    <li> <span class="glyphicon glyphicon-scissors" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-scissors</span> </li>
    <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-bitcoin</span> </li>
    <li> <span class="glyphicon glyphicon-btc" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-btc</span> </li>
    <li> <span class="glyphicon glyphicon-xbt" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-xbt</span> </li>
    <li> <span class="glyphicon glyphicon-yen" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-yen</span> </li>
    <li> <span class="glyphicon glyphicon-jpy" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-jpy</span> </li>
    <li> <span class="glyphicon glyphicon-ruble" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ruble</span> </li>
    <li> <span class="glyphicon glyphicon-rub" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-rub</span> </li>
    <li> <span class="glyphicon glyphicon-scale" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-scale</span> </li>
    <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ice-lolly</span> </li>
    <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-ice-lolly-tasted</span> </li>
    <li> <span class="glyphicon glyphicon-education" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-education</span> </li>
    <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-option-horizontal</span> </li>
    <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-option-vertical</span> </li>
    <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-menu-hamburger</span> </li>
    <li> <span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-modal-window</span> </li>
    <li> <span class="glyphicon glyphicon-oil" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-oil</span> </li>
    <li> <span class="glyphicon glyphicon-grain" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-grain</span> </li>
    <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-sunglasses</span> </li>
    <li> <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-text-size</span> </li>
    <li> <span class="glyphicon glyphicon-text-color" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-text-color</span> </li>
    <li> <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-text-background</span> </li>
    <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-top</span> </li>
    <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-bottom</span> </li>
    <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-horizontal</span></li>
    <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-left</span> </li>
    <li><span class="glyphicon glyphicon-object-align-vertical" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-vertical</span> </li>
    <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-object-align-right</span> </li>
    <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-triangle-right</span> </li>
    <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-triangle-left</span> </li>
    <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-triangle-bottom</span> </li>
    <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-triangle-top</span> </li>
    <li> <span class="glyphicon glyphicon-console" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-console</span> </li>
    <li> <span class="glyphicon glyphicon-superscript" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-superscript</span> </li>
    <li> <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-subscript</span> </li>
    <li> <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-menu-left</span> </li>
    <li> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-menu-right</span> </li>
    <li> <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-menu-down</span> </li>
    <li> <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-menu-up</span>
    -->
    </li>
</ul>

5.6 SVG icons - CORE

SVG icons - CORE

Since SVG scalability isn't well supported on IE10 and IE11, SVGs are being defined as background images

.icon-svg + specific icon class

  • icon-brochure
  • icon-3door
  • icon-5door
  • icon-account
  • icon-capacity
  • icon-category
  • icon-colour
  • icon-consumption
  • icon-dealer
  • icon-diesel
  • icon-emission
  • icon-engine
  • icon-environment
  • icon-file
  • icon-fleet
  • icon-gadget
  • icon-gadget-1
  • icon-gadget-2
  • icon-hybrid-copy
  • icon-hybrid
  • icon-information
  • icon-licence-plate
  • icon-mail
  • icon-model
  • icon-most-popular
  • icon-online
  • icon-overview
  • icon-petrol
  • icon-popular
  • icon-price
  • icon-promotion
  • icon-qr-code
  • icon-question
  • icon-rate
  • icon-rating
  • icon-released
  • icon-safety
  • icon-safety-outside
  • icon-search
  • icon-seats
  • icon-speed
  • icon-steering-wheel
  • icon-style
  • icon-topics
  • icon-wheels
  • icon-map-marker-light
  • icon-brochure
  • icon-calculator
  • icon-calendar
  • icon-pin
  • icon-testdrive
  • icon-contract
  • icon-dealer-2
  • icon-delivery
  • icon-email
  • icon-insurance
  • icon-map-marker
  • icon-order
  • icon-order-completed
  • icon-trade-in
<ul class="icons">
	<li>
		<span class="icon-svg icon-brochure"></span>
		icon-brochure
	</li>
	<li>
		<span class="icon-svg icon-3door"></span>
		icon-3door
	</li>
	<li>
		<span class="icon-svg icon-5door"></span>
		icon-5door
	</li>
	<li>
		<span class="icon-svg icon-account"></span>
		icon-account
	</li>
	<li>
		<span class="icon-svg icon-capacity"></span>
		icon-capacity
	</li>
	<li>
		<span class="icon-svg icon-category"></span>
		icon-category
	</li>
	<li>
		<span class="icon-svg icon-colour"></span>
		icon-colour
	</li>
	<li>
		<span class="icon-svg icon-consumption"></span>
		icon-consumption
	</li>
	<li>
		<span class="icon-svg icon-dealer"></span>
		icon-dealer
	</li>
	<li>
		<span class="icon-svg icon-diesel"></span>
		icon-diesel
	</li>
	<li>
		<span class="icon-svg icon-emission"></span>
		icon-emission
	</li>
	<li>
		<span class="icon-svg icon-engine"></span>
		icon-engine
	</li>
	<li>
		<span class="icon-svg icon-environment"></span>
		icon-environment
	</li>
	<li>
		<span class="icon-svg icon-file"></span>
		icon-file
	</li>
	<li>
		<span class="icon-svg icon-fleet"></span>
		icon-fleet
	</li>
	<li>
		<span class="icon-svg icon-gadget"></span>
		icon-gadget
	</li>
	<li>
		<span class="icon-svg icon-gadget-1"></span>
		icon-gadget-1
	</li>
	<li>
		<span class="icon-svg icon-gadget-2"></span>
		icon-gadget-2
	</li>
	<li>
		<span class="icon-svg icon-hybrid-copy"></span>
		icon-hybrid-copy
	</li>
	<li>
		<span class="icon-svg icon-hybrid"></span>
		icon-hybrid
	</li>
	<li>
		<span class="icon-svg icon-information"></span>
		icon-information
	</li>
	<li>
		<span class="icon-svg icon-licence-plate"></span>
		icon-licence-plate
	</li>
	<li>
		<span class="icon-svg icon-mail"></span>
		icon-mail
	</li>
	<li>
		<span class="icon-svg icon-model"></span>
		icon-model
	</li>
	<li>
		<span class="icon-svg icon-most-popular"></span>
		icon-most-popular
	</li>
	<li>
		<span class="icon-svg icon-online"></span>
		icon-online
	</li>
	<li>
		<span class="icon-svg icon-overview"></span>
		icon-overview
	</li>
	<li>
		<span class="icon-svg icon-petrol"></span>
		icon-petrol
	</li>
	<li>
		<span class="icon-svg icon-popular"></span>
		icon-popular
	</li>
	<li>
		<span class="icon-svg icon-price"></span>
		icon-price
	</li>
	<li>
		<span class="icon-svg icon-promotion"></span>
		icon-promotion
	</li>
	<li>
		<span class="icon-svg icon-qr-code"></span>
		icon-qr-code
	</li>
	<li>
		<span class="icon-svg icon-question"></span>
		icon-question
	</li>
	<li>
		<span class="icon-svg icon-rate"></span>
		icon-rate
	</li>
	<li>
		<span class="icon-svg icon-rating"></span>
		icon-rating
	</li>
	<li>
		<span class="icon-svg icon-released"></span>
		icon-released
	</li>
	<li>
		<span class="icon-svg icon-safety"></span>
		icon-safety
	</li>
	<li>
		<span class="icon-svg icon-safety-outside"></span>
		icon-safety-outside
	</li>
	<li>
		<span class="icon-svg icon-search"></span>
		icon-search
	</li>
	<li>
		<span class="icon-svg icon-seats"></span>
		icon-seats
	</li>
	<li>
		<span class="icon-svg icon-speed"></span>
		icon-speed
	</li>
	<li>
		<span class="icon-svg icon-steering-wheel"></span>
		icon-steering-wheel
	</li>
	<li>
		<span class="icon-svg icon-style"></span>
		icon-style
	</li>
	<li>
		<span class="icon-svg icon-topics"></span>
		icon-topics
	</li>
	<li>
		<span class="icon-svg icon-wheels"></span>
		icon-wheels
	</li>
	<li>
		<span class="icon-svg icon-map-marker-light"></span>
		icon-map-marker-light
	</li>
	<li>
		<span class="icon-svg icon-brochure"></span>
		icon-brochure
	</li>
	<li>
		<span class="icon-svg icon-calculator"></span>
		icon-calculator
	</li>
	<li>
		<span class="icon-svg icon-calendar"></span>
		icon-calendar
	</li>
	<li>
		<span class="icon-svg icon-pin"></span>
		icon-pin
	</li>
	<li>
		<span class="icon-svg icon-testdrive"></span>
		icon-testdrive
	</li>
	<li>
		<span class="icon-svg icon-contract"></span>
		icon-contract
	</li>
	<li>
		<span class="icon-svg icon-dealer-2"></span>
		icon-dealer-2
	</li>
	<li>
		<span class="icon-svg icon-delivery"></span>
		icon-delivery
	</li>
	<li>
		<span class="icon-svg icon-email"></span>
		icon-email
	</li>
	<li>
		<span class="icon-svg icon-insurance"></span>
		icon-insurance
	</li>
	<li>
		<span class="icon-svg icon-map-marker"></span>
		icon-map-marker
	</li>
	<li>
		<span class="icon-svg icon-order"></span>
		icon-order
	</li>
	<li>
		<span class="icon-svg icon-order-completed"></span>
		icon-order-completed
	</li>
	<li>
		<span class="icon-svg icon-trade-in"></span>
		icon-trade-in
	</li>
</ul>

5.7 icons utility classes

5.7.1 Rounded icons - EXTENDED

Rounded icons - EXTENDED

A rounded utility class can be added to an icon. The icon will then have a default background colour and font color that you can override depending on the context the icon is used. The icon is going to have to be positioned depending on the context inside a wider/higher container set to position:relative

.rounded + .icon + .icon-XXXXX



<div style="position: relative; width: 100px; height: 100px;">
    <span class="icon icon-search rounded"></span>
</div>
<br>
<br>
<div style="position: relative; width: 100px; height: 100px;">
    <!-- Specific positioning and font-size for the icon-play after akqa Q.A. -->
    <span class="icon icon-play rounded"></span>
</div>