Iconos

Galería de iconos para usar dentro de la plataforma,

No signal

<i class="i-no-signal"></i>

Signal poor

<i class="i-signal-p"></i>

Signal regular

<i class="i-signal-r"></i>

Signal good

<i class="i-signal-g"></i>

Signal excellent

<i class="i-signal-vg"></i>

Battery load 0%

<i class="i-bat-0"></i>

Battery load 25%

<i class="i-bat-25"></i>

Battery load 50%

<i class="i-bat-50"></i>

Battery load 75%

<i class="i-bat-75"></i>

Battery load 100%

<i class="i-bat-100"></i>

Low speed

<i class="i-speed-s"></i>

Average speed

<i class="i-speed-m"></i>

Fast speed

<i class="i-speed-f"></i>

Stopped time

<i class="i-clock-p"></i>

Last Report Time

<i class="i-clock-r"></i>

Clock

<i class="i-clock"></i>

Battery

<i class="i-battery"></i>

Last report

<i class="i-last-r"></i>

Temperature

<i class="i-temp"></i>

Stop

<i class="i-stop"></i>

Satelite

<i class="i-sat"></i>

Satelite off

<i class="i-sat-off"></i>

Safebox

<i class="i-safebox"></i>

Orientation

<i class="i-orient"></i>

Orientation off

<i class="i-orient-off"></i>

Redjoin

<i class="i-redjoin"></i>

Output

<i class="i-output"></i>

Fuel

<i class="i-fuel"></i>

Report

<i class="i-report"></i>

Platform

<i class="i-platform"></i>

Key

<i class="i-key"></i>

Company

<i class="i-company"></i>

Route

<i class="i-route"></i>

Driver

<i class="i-driver"></i>

Place

<i class="i-place"></i>

Place add

<i class="i-place-add"></i>

Place hidden

<i class="i-place-hidden"></i>

Place group

<i class="i-place-group"></i>

Geofence

<i class="i-geofence"></i>

Geofence group

<i class="i-geofence-group"></i>

Place geofence

<i class="i-place-geofence"></i>

Vehicle

<i class="i-vehicle"></i>

User

<i class="i-user"></i>

User config

<i class="i-user-config"></i>

Active user

<i class="i-active"></i>

Suspend

<i class="i-suspend"></i>

Sims

<i class="i-sims"></i>

Gps

<i class="i-gps"></i>

Faq

<i class="i-faq"></i>

Groups

<i class="i-groups"></i>

Global group

<i class="i-global-group"></i>

Machinery

<i class="i-machinery"></i>

Backup

<i class="i-backup"></i>

Alert

<i class="i-alert"></i>

Unlock

<i class="i-lock"></i>

Lock

<i class="i-lock-2"></i>

Location

<i class="i-location"></i>

Event

<i class="i-event"></i>

Code

<i class="i-code"></i>

Hidden

<i class="i-hidden"></i>

Visible

<i class="i-visible"></i>

Uncheck

<i class="i-uncheck"></i>

Check

<i class="i-check"></i>

Check off

<i class="i-check-off"></i>

Swap

<i class="i-swap"></i>

SMS

<i class="i-sms"></i>

Email

<i class="i-email"></i>

Camera

<i class="i-camera"></i>

Volume up

<i class="i-vol-up"></i>

Volume down

<i class="i-vol-down"></i>

Volume mute

<i class="i-vol-mute"></i>

Volume off

<i class="i-vol-off"></i>

Photo

<i class="i-photo"></i>

More vertical

<i class="i-more-vert"></i>

No print

<i class="i-print-dis"></i>

Print

<i class="i-print"></i>

Delete

<i class="i-delete"></i>

Bus

<i class="i-bus"></i>

Edit

<i class="i-edit"></i>

Edit off

<i class="i-edit-off"></i>

Draw

<i class="i-draw"></i>

Tclip

<i class="i-tclip"></i>

Cloud

<i class="i-cloud"></i>

Module

<i class="i-module"></i>

Elements

<i class="i-elements"></i>

Star

<i class="i-star"></i>

Import Export

<i class="i-imp-exp"></i>

Platforms

<i class="i-platforms"></i>

Search

<i class="i-search"></i>

Trending

<i class="i-trending"></i>

Videocam

<i class="i-videocam"></i>

Cog

<i class="i-cog"></i>

Report Event

<i class="i-report-e"></i>

Timeline

<i class="i-timeline"></i>

Key vpn

<i class="i-key-vpn"></i>

Add

<i class="i-add"></i>

Clear

<i class="i-clear"></i>

Columns

<i class="i-columns"></i>

Commute

<i class="i-commute"></i>

Desktop

<i class="i-desktop"></i>

Done

<i class="i-done"></i>

Filter

<i class="i-filter"></i>

Flag

<i class="i-flag"></i>

Pause

<i class="i-pause"></i>

Caret

<i class="i-caret"></i>

Home

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

Calendar

<i class="i-calendar"></i>

Calendar range

<i class="i-calendar-range"></i>

management

<i class="i-management"></i>

Box

<i class="i-box"></i>

Order ok

<i class="i-order-ok"></i>

Order cancel

<i class="i-order-cancel"></i>

Order pending

<i class="i-order-pending"></i>

Map

<i class="i-map"></i>

Label

<i class="i-label"></i>

Cancel

<i class="i-cancel"></i>

Plus

<i class="i-plus"></i>

Tool

<i class="i-tool"></i>

Van

<i class="i-van"></i>

World

<i class="i-world"></i>

Hourglass Empty

<i class="i-hglass-e"></i>

Hourglass Full

<i class="i-hglass-f"></i>

Donut

<i class="i-donut"></i>

GPS Off

<i class="i-gps-off"></i>

Cog Off

<i class="i-cog-off"></i>

Odometer Settings

<i class="i-odo-set"></i>

Odometer

<i class="i-odometer"></i>

Menu

<i class="i-menu"></i>

Car Plate

<i class="i-placa"></i>

Power On

<i class="i-power"></i>

Copy

<i class="i-copy"></i>

OK

<i class="i-ok"></i>

Share

<i class="i-share"></i>

Group Vehicles

<i class="i-group-v"></i>

Group Vehicles Alt

<i class="i-group-v-alt"></i>

Humidity

<i class="i-humidity"></i>

Light

<i class="i-light"></i>

Last Connection

<i class="i-last-connection"></i>

OBD

<i class="i-obd"></i>

Radio check

<i class="i-check"></i>

Radio uncheck

<i class="i-radio-uncheck"></i>

Ozono

<i class="i-ozono"></i>

Air quality

<i class="i-air-quality"></i>

Electric consume

<i class="i-electric-con"></i>

Tire Pressure

<i class="i-tire-pre"></i>

Save

<i class="i-save"></i>

Save alt

<i class="i-save-alt"></i>

Ramdom

<i class="i-random"></i>

Chart

<i class="i-chart"></i>

PDF

<i class="i-pdf"></i>

Hard disk drive

<i class="i-hdd"></i>

Service Order

<i class="i-sorder"></i>

Import

<i class="i-import"></i>

Export

<i class="i-export"></i>

Chevron left

<i class="i-chevron-l"></i>

Chevron up

<i class="i-chevron-t"></i>

Chevron right

<i class="i-chevron-r"></i>

Chevron down

<i class="i-chevron-d"></i>

Angle Left

<i class="i-angle-l"></i>

Angle Top

<i class="i-angle-t"></i>

Angle Right

<i class="i-angle-r"></i>

Angle Down

<i class="i-angle-d"></i>

Arrow left

<i class="i-arrow-l"></i>

Arrow top

<i class="i-arrow-t"></i>

Arrow right

<i class="i-arrow-r"></i>

Arrow down

<i class="i-arrow-d"></i>

Arrow left

<i class="i-arrow-left-alt"></i>

Arrow top

<i class="i-arrow-top-alt"></i>

Arrow right

<i class="i-arrow-right-alt"></i>

Arrow bottom

<i class="i-arrow-bottom-alt"></i>

Notification on

<i class="i-not-on"></i>

Notification off

<i class="i-not-off"></i>

Color Picker

<i class="i-picker"></i>

Palette

<i class="i-palette"></i>

Smartphone

<i class="i-phone"></i>

Smartphone Off

<i class="i-phone-off"></i>

Laptop

<i class="i-laptop"></i>

Trailer

<i class="i-trailer"></i>

Trailer

<i class="i-trailer-alt"></i>

Box trailer

<i class="i-btrailer"></i>

Box trailer plus

<i class="i-btrailer-plus"></i>

Tow

<i class="i-tow"></i>

Container

<i class="i-container"></i>

Warehouse

<i class="i-warehouse"></i>

Play

<i class="i-play"></i>

Stop alt

<i class="i-stop-alt"></i>

Skip preview

<i class="i-prev"></i>

Skip next

<i class="i-next"></i>

Template

<i class="i-template"></i>

Login

<i class="i-login"></i>

Exit

<i class="i-exit"></i>

Certificate

<i class="i-certificate"></i>

File

<i class="i-file"></i>

Code alt

<i class="i-code-alt"></i>

File code

<i class="i-file-code"></i>

Web Service

<i class="i-web-ser"></i>

Passenger

<i class="i-passenger"></i>

Ambulance

<i class="i-ambulance"></i>

Transfer

<i class="i-transfer"></i>

Medical Assistant

<i class="i-med-assis"></i>

Seat Belt

<i class="i-seat-belt"></i>

Wiper Washer

<i class="i-wiper"></i>

Engine Stop

<i class="i-engine-stop"></i>

Horometer

<i class="i-horometer"></i>

Open New

<i class="i-open-new"></i>

Send

<i class="i-send"></i>

Attach File

<i class="i-attach-file"></i>

Input

<i class="i-input"></i>

Open fullscreen

<i class="i-open-full"></i>

Close fullscreen

<i class="i-close-full"></i>

More information

<i class="i-more-info"></i>

Traffic

<i class="i-traffic"></i>

Excel

<i class="i-excel"></i>

Report executed

<i class="i-report-ex"></i>

Report sent

<i class="i-report-se"></i>

Failed report

<i class="i-report-fa"></i>

Scheduled report

<i class="i-report-sc"></i>

Android

<i class="i-android"></i>

Apple

<i class="i-ios"></i>

PDF File

<i class="i-pdf-file"></i>

CSV File

<i class="i-csv-file"></i>

Order

<i class="i-lev-pedido"></i>

Minimize

<i class="i-minimize"></i>

Sleep

<i class="i-sleep"></i>

Share alt

<i class="i-share-alt"></i>

Rotate

<i class="i-rotate"></i>

Plugin

<i class="i-plugin"></i>

Grid

<i class="i-grid"></i>

Update

<i class="i-update"></i>

3D

<i class="i-3d"></i>

QR

<i class="i-qr"></i>

Sensor

<i class="i-sensor"></i>

Detail

<i class="i-detail"></i>

Numbers

<i class="i-numbers"></i>

House

<i class="i-house"></i>

Apartment

<i class="i-apartment"></i>

Ticket

<i class="i-ticket"></i>

Ticket alt

<i class="i-ticket-alt"></i>

Fuel Open

<i class="i-fuel-open"></i>

Fuel Close

<i class="i-fuel-close"></i>

Duplicate

<i class="i-duplicate"></i>

Phone add

<i class="i-phone-add"></i>

Sub distributor

<i class="i-sub-distri"></i>

Conflict

<i class="i-conflict"></i>

Important

<i class="i-important"></i>

Ok alt

<i class="i-ok-alt"></i>

Stop hand

<i class="i-stop-hand"></i>

Doors

<i class="i-doors-oc"></i>

Oil

<i class="i-oil"></i>

Motor speed

<i class="i-motor-speed"></i>

MAF

<i class="i-maf"></i>

Fuel level

<i class="i-fuel-level"></i>

Engine hours

<i class="i-engine-hours"></i>

Coolant level

<i class="i-coolant-level"></i>

Brake position

<i class="i-brake-pos"></i>

ABS

<i class="i-abs"></i>

Vibration sensor

<i class="i-vibration-sensor"></i>

RFID

<i class="i-rfid"></i>

Passenger counter

<i class="i-passenger-counter"></i>

Motion sensor

<i class="i-motion-sensor"></i>

Manhole seal

<i class="i-manhole-seal"></i>

Jamming

<i class="i-jamming"></i>

Ibutton

<i class="i-ibutton"></i>

Garmin

<i class="i-garmin"></i>

Fuel shutoff

<i class="i-fuel-shutoff"></i>

Fingerprint reader

<i class="i-fingerprint-reader"></i>

Fall detector

<i class="i-fall-detector"></i>

Buzzer

<i class="i-buzzer"></i>

Button panic

<i class="i-button-panic"></i>

Battery off

<i class="i-battery-off"></i>

Atmospheric pressure

<i class="i-atmospheric-pressure"></i>

Antenna shutoff

<i class="i-antenna-shutoff"></i>

Valve seal

<i class="i-valve-seal"></i>

Total fuel

<i class="i-total-fuel"></i>

Throttle

<i class="i-throttle"></i>

Tachograph

<i class="i-tachograph"></i>

Multisense

<i class="i-multisense"></i>

Intake manifold temperature

<i class="i-intake-manifold-temp"></i>

Intake manifold pressure

<i class="i-intake-manifold-pre"></i>

Coolant

<i class="i-coolant"></i>

Check engine

<i class="i-check-engine"></i>

CANBUS

<i class="i-canbus"></i>

Brake

<i class="i-brake"></i>

Air pressure

<i class="i-air-pressure"></i>

Wheel speed

<i class="i-wheel-speed"></i>

Vehicle speed

<i class="i-vehicle-speed"></i>

Temperature air intake

<i class="i-temp-air-intake"></i>

Sigfox

<i class="i-sigfox"></i>

Sensors

<i class="i-sensors"></i>

RSSI

<i class="i-rssi"></i>

Wind speed

<i class="i-wind-speed"></i>

UV radiation

<i class="i-uv-radiation"></i>

Timer

<i class="i-timer"></i>

Timer off

<i class="i-timer-off"></i>

Soil temp

<i class="i-soil-temp"></i>

Soil humidity

<i class="i-soil-humidity"></i>

Signal strength

<i class="i-signal-strength"></i>

GPS battery

<i class="i-gps-battery"></i>

Fuel pressure

<i class="i-fuel-pressure"></i>

Power supply

<i class="i-power-supply"></i>

Multisense tag

<i class="i-multisense-tag"></i>

Motor charge

<i class="i-motor-charge"></i>

Humidity alt

<i class="i-humidity-alt"></i>

GSM

<i class="i-gsm"></i>

RS232

<i class="i-rs232"></i>

Last location time

<i class="i-last-loc-time"></i>

Wind direction

<i class="i-direction-wind"></i>

Angle sensor

<i class="i-angle-sensor"></i>

SMS alert

<i class="i-sms-alert"></i>

Alert alt

<i class="i-alert-alt"></i>

Hierarchy

<i class="i-hierarchy"></i>

Streaming

<i class="i-Streaming"></i>

Check in

<i class="i-check-in"></i>

Check out

<i class="i-check-out"></i>

Pin map

<i class="i-pin-map"></i>

File rich

<i class="i-file-rich"></i>

IP change

<i class="i-ip-change"></i>

Lost video

<i class="i-lost-video"></i>

Movil on report

<i class="i-movil-on-report"></i>

Movil off report

<i class="i-movil-off-report"></i>

Power cut

<i class="i-power-cut"></i>

Sleep mode

<i class="i-sleep-mode"></i>

Stop report

<i class="i-stop-report"></i>

Time report

<i class="i-time-report"></i>

Tow emergency

<i class="i-tow-emergency"></i>

Travel start-end

<i class="i-travel-start-end"></i>

Turn left

<i class="i-turn-left"></i>

Turn right

<i class="i-turn-right"></i>

Turn report

<i class="i-turn-report"></i>

Active motion

<i class="i-active-motion"></i>

Active stopped

<i class="i-active-stopped"></i>

Alarm

<i class="i-alarm"></i>

Alarm off

<i class="i-alarm-off"></i>

Battery connection

<i class="i-battery-con"></i>

Close door

<i class="i-close-door"></i>

Collision

<i class="i-collision"></i>

Distance report

<i class="i-distance-report"></i>

Driver door

<i class="i-driver-door"></i>

Idle event

<i class="i-idle-event"></i>

Ignition on

<i class="i-ignition-on"></i>

Ignition off

<i class="i-ignition-off"></i>

Square

<i class="i-square"></i>

Circle

<i class="i-circle"></i>

Triangle

<i class="i-triangle"></i>

Diamond

<i class="i-diamond"></i>

Polygon

<i class="i-polygon"></i>

Gear Shifter

<i class="i-gear-shifter"></i>

Gear Level

<i class="i-gear-level"></i>

Gear Lvel Aut

<i class="i-gear-level-alt"></i>

Revolutions

<i class="i-revolutions"></i>

Eco Driving

<i class="i-eco-driving"></i>

Sample

<i class="i-sample"></i>

Secure parking

<i class="i-secure-parking"></i>

Cancel icon

<i class="i-cancel-icon"></i>

Cancel alt

<i class="i-cancel-alt"></i>

Delay alt

<i class="i-delay"></i>

Delay

<i class="i-delay-alt"></i>

Volume

<i class="i-volume"></i>

Weight

<i class="i-weight"></i>

Weight alt

<i class="i-weight-alt"></i>

Speedometer

<i class="i-speedometer"></i>

Clock alt

<i class="i-clock-alt"></i>

Clock alt delay

<i class="i-clock-alt-delay"></i>

Input / Output

<i class="i-input-output"></i>

Travel

<i class="i-travel"></i>

Convert money

<i class="i-convert-money"></i>

Form ok

<i class="i-form-ok"></i>

Reset

<i class="i-reset"></i>

Replace

<i class="i-replase"></i>

Add GPS

<i class="i-add-gps"></i>

ID

<i class="i-id"></i>

SOAT

<i class="i-soat"></i>

Credit card

<i class="i-card"></i>

Money

<i class="i-money"></i>

File upload

<i class="i-file-upload"></i>

File download

<i class="i-file-download"></i>

Cloud upload

<i class="i-cloud-upload"></i>

Cloud download

<i class="i-cloud-download"></i>

Moving time

<i class="i-moving-time"></i>

Stopped time

<i class="i-stopped-time-alt"></i>

Change view

<i class="i-change-view"></i>

Get in car

<i class="i-getin-car"></i>

Get out car

<i class="i-getout-car"></i>

Get in man

<i class="i-getin-man"></i>

Get out man

<i class="i-getout-man"></i>

Swipe

<i class="i-swipe"></i>

Swipe down

<i class="i-swipe-down"></i>

Swipe vertical

<i class="i-swipe-vertical"></i>

Cursor

<i class="i-cursor"></i>

Drag

<i class="i-drag"></i>

Load

<i class="i-load"></i>

Load

<i class="i-load-alt"></i>

Eraser

<i class="i-eraser"></i>

Change user

<i class="i-change-user"></i>

Table

<i class="i-table"></i>

Show table

<i class="i-show-table"></i>

Translate

<i class="i-translate"></i>

Virtual device

<i class="i-virtual-device"></i>

Version control

<i class="i-version-control"></i>

Opacity

<i class="i-opacity"></i>

Opacity off

<i class="i-opacity-off"></i>

Opacity alt

<i class="i-opacity-alt"></i>

Opacity alt off

<i class="i-opacity-alt-off"></i>

Folder-alt

<i class="i-folder-alt"></i>

Parking

<i class="i-parking"></i>

Parking-alt

<i class="i-parking-alt"></i>

Signal stop

<i class="i-stop-signal"></i>

Street view

<i class="i-streetview"></i>

Asterisk

<i class="i-asterisk"></i>

Gmap icon

<i class="i-gmap-icon"></i>

Remove

<i class="i-remove"></i>

Remove circle

<i class="i-remove-circle"></i>

Remove box

<i class="i-remove-box"></i>

Plus alt

<i class="i-plus-alt"></i>

Minus

<i class="i-minus"></i>

Multiplied

<i class="i-multiplied"></i>

Divided

<i class="i-divided"></i>

Porcentage

<i class="i-porcentage"></i>

Equals

<i class="i-equals"></i>

ID Car

<i class="i-id-car"></i>

Revision

<i class="i-revision"></i>

Policy

<i class="i-policy"></i>

Api key

<i class="i-apikey"></i>

Api key alt

<i class="i-apikey-alt"></i>

Clean

<i class="i-clean"></i>

Handshake

<i class="i-Handshake"></i>

Handshake alt

<i class="i-Handshake-alt"></i>

File ok

<i class="i-file-ok"></i>

User / asset

<i class="i-user-asset"></i>
Marcas

HTML 5

<i class="i-html5"></i>

CSS 3

<i class="i-css3"></i>

JS

<i class="i-js"></i>

Whatsapp

<i class="i-whatsapp"></i>

Telegram

<i class="i-telegram"></i>
Plataformas

OnTraking

<i class="i-ontraking"></i>

Reportes

<i class="i-p-reportes"></i>

OnBus

<i class="i-onbus"></i>

RedJoin

<i class="i-p-redjoin"></i>

OnDriving

<i class="i-ondriving"></i>

Mantenimientos

<i class="i-p-manten"></i>

OnRouting

<i class="i-onrouting"></i>

OnRoad

<i class="i-onroad"></i>

OnWall

<i class="i-onwall"></i>

OnAlert

<i class="i-onalert"></i>

OnPatrol

<i class="i-onpatrol"></i>

OnDocs

<i class="i-ondocs"></i>

OnDelivery

<i class="i-ondelivery"></i>

OnTrailer

<i class="i-ontrailer"></i>

OnService

<i class="i-onservice"></i>

OnDash

<i class="i-ondash"></i>

OnNavigate

<i class="i-onnavigate"></i>
Vehículos

Automovil

<i class="i-automovil"></i>

Camioneta

<i class="i-camioneta"></i>

Pickup

<i class="i-pickup"></i>

Taxi

<i class="i-taxi"></i>

Van pasajero

<i class="i-van-pasajero"></i>

Autobus

<i class="i-autobus"></i>

Bicicleta

<i class="i-bicicleta"></i>

Moto

<i class="i-moto"></i>

Tricimoto

<i class="i-tricimoto"></i>

Mascota

<i class="i-mascota"></i>

Motopatrulla

<i class="i-motopatrulla"></i>

patrulla

<i class="i-patrulla"></i>

Peaton

<i class="i-peaton"></i>

Camión

<i class="i-camion"></i>

Tractocamión

<i class="i-tractocamion"></i>

Escarbadora

<i class="i-escarbadora"></i>

Tractor Agrricola

<i class="i-tractor-agricola"></i>

Compactadora

<i class="i-compactadora"></i>

Mezcladora

<i class="i-mezcladora"></i>

Avioneta

<i class="i-avioneta"></i>

Barco

<i class="i-nautical"></i>

Tamaño y color

Las siguientes clases las podrás utilizar para modificar el tamaño y color de los iconos dentro de la plataforma.

Tamaño

Para aplicar los estilos es necesario agregar una clase, a continuación, tomando el ejemplo anterior, podremos ver la estructura que tienen.

//ic-x1
<i class="i-cog ic-x1"></i>
    
//ic-x2
<i class="i-cog ic-x2"></i>
    
//ic-x3
<i class="i-cog ic-x3"></i>
    
//ic-x4
<i class="i-cog ic-x4"></i>
    
//ic-x5
<i class="i-cog ic-x5"></i>
    
//ic-x6
<i class="i-cog ic-x6"></i>
    
//ic-x7
<i class="i-cog ic-x7"></i>
    
//ic-x8
<i class="i-cog ic-x8"></i>

Color

Para aplicar los estilos es necesario agregar las siguientes clases:

    //Verde
    <i class="i-cog ic-green"></i>

    //Azul
    <i class="i-cog ic-blue"></i>

    //Amarillo
    <i class="i-cog ic-yellow"></i>

    //Naranja
    <i class="i-cog ic-orange"></i>

    //Rojo
    <i class="i-cog ic-red"></i>

    //Gris
    <i class="i-cog ic-gray"></i>

    //Blanco
    <i class="i-cog ic-white"></i>

    //Negro
    <i class="i-cog ic-black"></i>
    

Contenedor para iconos

Se contemplaron 2 tipos de contenedores para los iconos, uno de forma circular y un segundo de forma cuadrada.

Contenedor circular

La clase necesaria para poder obtener este contendor circular es encapCustom y el resultado seria como el sigueinte.

La estructura del ejemplo anterior, sería la siguiente.

<div class="encapCustom">
    <i class="i-bat-50"></i>
</div>

<div class="encapCustom">
    <i class="i-signal-r"></i>
</div>

<div class="encapCustom">
    <i class="i-speed-s"></i>
</div>

<div class="encapCustom">
    <i class="i-sat"></i>
</div>

<div class="encapCustom">
    <i class="i-vol-down"></i>
</div>

<div class="encapCustom">
    <i class="i-edit"></i>
</div>

<div class="encapCustom">
    <i class="i-key-vpn"></i>
</div>

<div class="encapCustom">
    <i class="i-light"></i>
</div>   

Contenedor cuadrado

Tomando de base la clase encapCustom, al agregar la clase ecSquare se obtendrá la forma cuadrada del contenedor, como se muestra a continuación.

La estructura del ejemplo anterior, sería la siguiente.

<div class="encapCustom ecSquare">
    <i class="i-bat-50"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-signal-r"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-speed-s"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-sat"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-vol-down"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-edit"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-key-vpn"></i>
</div>

<div class="encapCustom ecSquare">
    <i class="i-light"></i>
</div>

Tamaños de contenedor

Los contenedores pueden variar su tamaño, dependiendo de las necesidades del usuario, se contemplaron 7 tamaños mas el tamaño por default que tienen los contenedores, como se muestra a continuación.

La clases clases para obtener estos tamaños van del ec-x2 al ec-x8, como se mostrará a continuación.

//Tamaño por default
<div class="encapCustom ecSquare">
    <i class="i-bat-50"></i>
</div>
    
//Tamaño 2
<div class="encapCustom ec-x2">
    <i class="i-signal-r"></i>
</div>
    
//Tamaño 3
<div class="encapCustom ecSquare ec-x3">
    <i class="i-speed-s"></i>
</div>
    
//Tamaño 4
<div class="encapCustom ec-x4">
    <i class="i-sat"></i>
</div>
    
//Tamaño 5
<div class="encapCustom ecSquare ec-x5">
    <i class="i-vol-down"></i>
</div>
    
//Tamaño 6
<div class="encapCustom ec-x6">
    <i class="i-edit"></i>
</div>
    
//Tamaño 7
<div class="encapCustom ecSquare ec-x7">
    <i class="i-key-vpn"></i>
</div>
    
//Tamaño 8
<div class="encapCustom ec-x8">
    <i class="i-light"></i>
</div>

Cancelar icono

Para poder disponer de todos los iconos en su modalidad de cancelado, se agrego una clase para lograr este fin.

Para aplicar los estilos es necesario agregar la clase iconCancel, a continuación, tomando el ejemplo anterior, podremos ver la estructura que tienen.

<i class="i-cog"></i>
<i class="i-cog iconCancel"></i>
        
<i class="i-bat-0"></i>
<i class="i-bat-0 iconCancel"></i>

<i class="i-driver"></i>
<i class="i-driver iconCancel"></i>

<i class="i-camera"></i>
<i class="i-camera iconCancel"></i>

<i class="i-calendar "></i>
<i class="i-calendar iconCancel"></i>

Colores

Al icono de cancelar se le podran aplicar colores predeterminados, como se muestra a continuación.

              

Solo sera necesario aplicar una clase adicional para poder obtener el cambio de color del icono de cancelar. A continuación se mostrará el ejemplo anterior con las clases que se aplicaron.

//Color rojo, clase "icolRed"
<i class="i-cog iconCancel icolRed"></i>

//Color verde, clase "icolGreen"
<i class="i-bat-0 iconCancel icolGreen"></i>

//Color azul, clase "icolBlue"
<i class="i-driver iconCancel icolBlue"></i>

//Color amarillo, clase "icolYellow"
<i class="i-camera iconCancel icolYellow"></i>

//Color naranja, clase "icolOrange"
<i class="i-calendar iconCancel icolOrange"></i>

//Color negro, clase "icolBlack"
<i class="i-sims iconCancel icolBlack"></i>

Superponer iconos

Para poner algun indicador sobre los iconos, se agregaron clases para obtener lo siguiente.

       

La estructura y clases del ejemplo anterior son los siguientes, cabe mencionar que en el caso de la alerta, la estructura es un poco diferente

//Icono de checkbox seleccionado "iconCheckOn"
<i class="i-fuel iconCheckOn"></i>

//Icono de checkbox sin seleccionar "iconCheckOff"
<i class="i-fuel iconCheckOff"></i>
    
//Icono activado "iconOn"
<i class="i-fuel iconOn"></i>

//Icono desactivado "iconOff"
<i class="i-fuel iconOff"></i>
    
//Icono de notificación "iconNotif"
<i class="i-fuel iconNotif"></i>

//Icono de alerta "iconAlert"
<i class="i-fuel iconAlert">
    <i></i>
</i>

Posición

Los iconos superpuestos mostrados anteriormente, por defualt su posición es en la parte inferior derecha, pero pensando que se pudieran necesitar en alguna posición diferente, se pueden tambien mostrar asi.

    

La estructura y clases del ejemplo anterior es la siguiente:

//Posición por default, no necesita clas
<i class="i-fuel iconOn"></i>
    
//Posición inferior izquierda "iposLB"
<i class="i-fuel iconOn iposLB"></i>
    
//Posición superior izquierda "iposLT"
<i class="i-fuel iconOn iposLT"></i>
    
//Posición superior derecha "iposRT"
<i class="i-fuel iconOn iposRT"></i> 

Colores

Al icono superpuesto se le podran aplicar colores predeterminados, como se muestra a continuación.

Solo sera necesario aplicar una clase adicional para poder obtener el cambio de color del icono superpuesto. A continuación se mostrará el ejemplo anterior con las clases que se aplicaron.

//Color rojo, clase "icolRed"
<i class="i-fuel iconOn icolRed"></i>
    
//Color verde, clase "icolGreen"
<i class="i-fuel iconOn icolGreen"></i>
    
//Color azul, clase "icolBlue"
<i class="i-fuel iconOn icolBlue"></i>
    
//Color amarillo, clase "icolYellow"
<i class="i-fuel iconOn icolYellow"></i>
    
//Color naranja, clase "icolOrange"
<i class="i-fuel iconOn icolOrange"></i>
    
//Color negro, clase "icolBlack"
<i class="i-fuel iconOn icolBlack"></i>

Animación iconos

Las siguientes animaciones estaran disponibles para todos los iconos de la plataforma.

Intermitencia

En esta animación el icono aparece y desaparece de forma intermitente, como se muestra a continuación.

Para obtener la animación, ese nesario agregar la clase icolInter, la estructura del ejemplo anterior es la siguiente:

<i class="i-alarm icolInter"></i>    

Rotación

En esta animación el icono rotara, es ideal para aplicar a un loader.

Para obtener la animación, ese nesario agregar la clase icolRot, la estructura del ejemplo anterior es la siguiente:

<i class="i-not-on icolRot"></i>    

Movimiento 1

En esta animación el icono se mueve de manera horizontal, es perfecta para los iconos de notificacion (campana).

Para obtener la animación, ese nesario agregar la clase icolMov, la estructura del ejemplo anterior es la siguiente:

<i class="i-not-on icolMov"></i>    

Iconos 3D

Galería de iconos 3D disponibles en la plataforma para los activos de los usuarios.

Vehículos

Scooter
Bicicleta
Motoneta
Motocicleta
Cuatrimoto
Sedan
SUV
Furgoneta
Furgoneta con ventana
Pickup
Grua
Camioneta sin caja
Camioneta con batea
Camión con caja
Volteo
Pipa
Revolvedora
Bomba de concreto
Microbus
Microbus sin ventanas
Autobus
Trailer
International
Trailer v2 sin caja
Trailer v2 plataforma
Trailer v2 plataforma
Trailer v2
Contenedor
Remolque
Remolque caja

Maquinaría amarilla

Montacarga
Mini bulldozer
Motoniveladora
Aplanadora
Bulldozer
Retroexcavadora
CAT 725
Grua excavadora
Grúa v2
CAT 797

Maquinaría agricola

Tractor JD
Tactor MF
Tractor

Servicios

Patrulla
Taxi
Ambulancia
Camión basura

Transporte marítimo

Barco pequeño

Marcadores

Dentro de la plataforma, se tienen los siguientes marcadores para utilizar en el mapa.

Marcador por tipo (general, evento y alerta)

El marcador por defualt, se muestra con la sigueinte url:

https://static-1.service24gps.com/commons/svg/marker_general.php

y se muestra de la siguiente manera:

Para obtener el icono de alerta, solo es necesario pasar el parámetro ?type=3, la url deberia quedar asi.

https://static-1.service24gps.com/commons/svg/marker_general.php?type=3

y se muestra de la siguiente manera:

Para obtener el icono de evento, solo es necesario pasar el parámetro ?type=2, la url deberia quedar asi.

https://static-1.service24gps.com/commons/svg/marker_general.php?type=2

y se muestra de la siguiente manera: