Usuario:JanKlaaseen/wazo images/waze icons/en Ver historial

Show version. Mostrar versión

How to Use

We have the Waze icon library set available to us.

We can use the Waze icons on any page of waze, for this we will use the prefix w-icon followed by the name of the icon.

To use the icon we will use the tag:

<i class="w-icon w-icon-home></i> =

To change the color of an icon we can use the CSS property "color":

<i class="w-icon w-icon-android" style="color:green"></i> =

To change the size of an icon we can use the CSS property "font-size":

<i class="w-icon w-icon-closure" style="font-size:30px"></i> =

Also, waze icons provides classes for changing the size of icons, they are xs, sm, lg, lx, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x, fw, pull left, pull right

It can be used with these HTML tags:
<i>: Use this tag to add icons to your text elements, such as in a bullet list or a title.

<span>: Use this tag if you want to add icons to a specific text fragment within a paragraph.

<a>: Use this tag if you want to add icons to your links.

<button>: Use this tag if you want to add icons to your buttons.

<div>: Use this tag if you want to add icons to a container element.

<li>: Use this tag if you want to add icons to your list items.

<nav>: Use this tag if you want to add icons to your navigation elements.

<header>: Use this tag if you want to add icons to your header elements.

<footer>: Use this tag if you want to add icons to your footer elements.


Examples of predefined sizes

normal lg xs sm lx 2x 3x 4x 5x 6x 7x 8x 9x 10x fw border
pull left
pull right


Available icons
Icons not shown are not available in the Wazeopedia.
If you are going to use them with a script, they may work correctly..

w-icon-add-user

w-icon-alert

w-icon-alert-danger

w-icon-alert-fill

w-icon-alert-info

w-icon-alert-success

w-icon-alert-warning

w-icon-android

w-icon-apple

w-icon-apps

w-icon-arrow-down

w-icon-arrow-left

w-icon-arrow-right

w-icon-arrow-two-way

w-icon-arrow-up

w-icon-attachment

w-icon-audio-player

w-icon-audio-stop-fill

w-icon-available-fill

w-icon-bell

w-icon-bell-off-fill

w-icon-bell-on-fill

w-icon-book

w-icon-bug-fill

w-icon-bug-outline

w-icon-bus

w-icon-calendar

w-icon-call

w-icon-camera

w-icon-camera-fill

w-icon-car

w-icon-car-services

w-icon-caret-down

w-icon-chat

w-icon-checkmark

w-icon-checkmark-double

w-icon-chevron-double-left

w-icon-chevron-double-right

w-icon-chevron-down

w-icon-chevron-left

w-icon-chevron-right

w-icon-chevron-up

w-icon-clock

w-icon-clock-fill

w-icon-closure

w-icon-code

w-icon-coins

w-icon-computer

w-icon-copy

w-icon-current-location

w-icon-danger

w-icon-doc

w-icon-dot-menu

w-icon-dot-menu-ios

w-icon-drag

w-icon-education

w-icon-email

w-icon-email-fill

w-icon-emoji

w-icon-equalizer

w-icon-error

w-icon-ev-charging

w-icon-exit-fullscreen

w-icon-expand1

w-icon-expand2

w-icon-expand3

w-icon-external-link

w-icon-eye-fill

w-icon-eye1

w-icon-eye2

w-icon-feed

w-icon-filter

w-icon-flag-fill

w-icon-floppy

w-icon-fullscreen

w-icon-hamburger-menu

w-icon-heart

w-icon-heart-fill

w-icon-help

w-icon-history

w-icon-home

w-icon-home-fill

w-icon-hotel

w-icon-inbox

w-icon-info

w-icon-language

w-icon-layers

w-icon-link

w-icon-list

w-icon-location

w-icon-location-2

w-icon-location-check-fill

w-icon-location-error-fill

w-icon-location-fill

w-icon-location-info

w-icon-location-off

w-icon-location-off-fill

w-icon-location-update-fill

w-icon-lock

w-icon-lock-fill

w-icon-logout

w-icon-map

w-icon-map-edit

w-icon-map-edit-fill

w-icon-message

w-icon-minus

w-icon-navigation-angle

w-icon-navigation-angle-fill

w-icon-navigation-fill

w-icon-navigation-now-fill

w-icon-node

w-icon-outdoor-parks

w-icon-parking

w-icon-parking-2

w-icon-partners

w-icon-pencil

w-icon-pencil-fill

w-icon-people

w-icon-phone

w-icon-phone-fill

w-icon-photo

w-icon-planned-drive-fill

w-icon-plus

w-icon-polygon

w-icon-pushpin

w-icon-pushpin-fill

w-icon-query-fill

w-icon-recenter

w-icon-recenter-off

w-icon-recheck

w-icon-redo

w-icon-refresh

w-icon-restaurant

w-icon-restore

w-icon-road

w-icon-round-trip

w-icon-route

w-icon-rss

w-icon-ruler

w-icon-school

w-icon-school-fill

w-icon-script

w-icon-search

w-icon-send-fill

w-icon-send-to-phone

w-icon-sent

w-icon-settings

w-icon-share

w-icon-sheild

w-icon-snapshot

w-icon-sort

w-icon-sound-on-fill

w-icon-star

w-icon-store

w-icon-store-fill

w-icon-streetview

w-icon-streetview-fill

w-icon-suggestion-fill

w-icon-suggestion-outline

w-icon-switch

w-icon-tag

w-icon-theater

w-icon-thumbs-down

w-icon-thumbs-down-fill

w-icon-thumbs-up

w-icon-thumbs-up-fill

w-icon-thunderbolt

w-icon-toolbox

w-icon-translate

w-icon-transportation

w-icon-trash

w-icon-trash-fill

w-icon-undo

w-icon-university

w-icon-user

w-icon-user-fill

w-icon-voice

w-icon-voice-fill

w-icon-warning

w-icon-wazer

w-icon-wazer-fill

w-icon-wifi

w-icon-work

w-icon-x