PCUI

Icon Libraries

Documentation and examples in using the icons with PCUI

Font-awesome icons

Note: Place Font Awesome icons by using the prefix fa and the icon's name.
Install the IconsBundle.min.css
ex: 

fa fa-info-circle fa-2x

fa fa-ellipsis-v fa-2x

fa fa-eye fa-2x

fa fa-angle-left fa-2x

fa fa-angle-up fa-2x

fa fa-angle-right fa-2x

"fa fa-angle-down fa-2x

fa fa-copy fa-2x

fa fa-exclamation-circle fa-2x

fa fa-align-justify fa-2x

fa fa-question-circle fa-2x

fa fa-exclamation-triangle fa-2x

fa fa-envelope fa-2x

fa fa-user-circle fa-2x

fa fa-lock fa-2x

fa fa-search fa-2x

fa fa-spinner fa-spin fa-2x fa-fw

fa fa-spinner fa-pulse fa-2x fa-fw

Ionicons

Basic usage: To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component.
Install the IconsBundle.min.css
ex: 

icon ion-ios-eye

icon ion-alert

icon ion-android-add-circle

ion-android-arrow-back

ion-android-cancel

ion-android-checkbox

ion-android-close

ion-android-create

ion-android-delete

ion-android-document

ion-android-done

ion-android-mail

ion-android-menu

ion-android-more-horizontal

ion-android-more-vertical

ion-android-search

ion-android-settings

ion-compose

Pelican Portal Icons

Basic usage: Place Pelican Portal icons by using the prefix span and the icon's name.
Install the IconsBundle.min.css
ex: 

pelcorp-pelcorp-send-reminder

pelcorp-pelcorp-rectangle-marquee

pelcorp-pelcorp-permitmonitor

pelcorp-pelcorp-planacces

pelcorp-pelcorp-dual-panel-white-0w

pelcorp-pelcorp-dual-panel-white-33w

pelcorp-pelcorp-dual-panel-white-50w

pelcorp-pelcorp-dual-panel-white-66w

pelcorp-pelcorp-dual-panel-white-100w

pelcorp-pelcorp-dual-panel-white-0h

pelcorp-pelcorp-dual-panel-white-33h

pelcorp-pelcorp-dual-panel-white-50h

pelcorp-pelcorp-dual-panel-white-66h

pelcorp-pelcorp-dual-panel-white-100h

pelcorp-pelcorp-minimise-arrows

pelcorp-leaflet-line

pelcorp-pelcorp-poly-rectangl

pelcorp-pelcorp-layers

pelcorp-pelcorp-poly-circle

pelcorp-pelcorp-marquee-poly-lasso

pelcorp-pelcorp-measure

ICONS - COMMONLY USED

Our primary source for icons is FontAwesome's Free icons. Our secondary source for icons is Ionicons. We also have a set of custom Pelican Corp icons. See OneNote for more details: https://tinyurl.com/yakg6lp5
This file holds the most commonly used icons, to make life easier (not having to open the SVG files every time).

FontAwesome
Most of our icons come from FontAwesome. They are here in their most commonly used sizes.

STANDARD VIEWS - 48x48 (e.g. loading, error)

NAVBARS - 24x24

TOPNAV (XS, SM, MD)- 24x24

TOPNAV (L, XL) - 18x18

TEXT FIELDS & TABLES - 12x12

Ionicons

...with a few supporting ones from Ionicons.

NAVBARS - 24x24

TOOLTIPS & SIDENAV - 18x18

TEXT FIELDS & TABLES - 12x12

PelicanCorp

And a few custom-made for PelicanCorp.

STANDARD VIEWS - 48x48 (e.g. loading, error)

TOPNAV (XS, SM, MD) - 24x24

TOPNAV (L, XL) - 18x18

TOOLTIPS & SIDENAV - 18x18

TEXT FIELDS & TABLES - 12x12

Representative only

We use whatever the code does - this is just for easy copy/paste for the designer.

CHECKBOXES & RADIOS - 18x18