Guidelines
    Overview
  • Welcome to RamBase Guidelines
  • Applications and components
  • RamBase client overview
    Design guidelines
  • Colors & borders
  • Layout
    • Standard layouts
  • RamBase Application overview
    • Context menu
    • Expanders
    • Splitter
    • Tab controller
    Development guidelines
  • Setup environment
  • Creating applications
    • Creating your first application
    • AppEditor
    • Context menu
  • Creating components
    • Creating your first component
    • Component layout
    • Component data service
    • Keyboard handling
  • APIs
    UI Elements
  • Alertbox
  • Button
  • Checkbox
  • Complex dropdown
  • Date
  • Datetime
  • Dropdown
  • Email
  • Grid
  • Icons
  • Navigate
  • Number
  • Password
  • Popover
  • Popup
  • Progressbar
  • Radiobutton
  • Textarea
  • Textfield
  • Toastr
  • Treeview

Icons


A set of icons have been designed/defined for RamBase. In need of new icons designer should be consulted to prevent erroneous use of icons and/or wrong layout and style.

  • Development guideline
  • Design guideline
  • All icons

Example of a typical icon:


Inspect icon


An inspect link will display as a small icon right to the label. Clicking on the icon will navigate to the application link specified. When the label has focus the user can also press F10 to navigate.


Example of inspect for a rb-input:

Example of inspect for any HTML element:

N/A

Reserved icons


These icons should NOT be used for anything other than whats described here

Customer
 icon-profile-title0xe8f8
Supplier
 icon-building0xe885
Inspect link
 icon-link-ext-alt0xe820
Grid settings
 icon-cog0xe851
Bookmarks
 icon-star0xe813
Product type KS
 icon-ks0xe873
Product type KM
 icon-km0xe892
Product type W
 icon-w0xe80a
Product type X
 icon-x0xe8b4
Product type WT
 icon-wt0xe8b5
Product type P
 icon-p0xe847

All icons


 icon-rent0xe800
 icon-procurement0xe801
 icon-megaphone-fill0xe802
 icon-megaphone-line0xe803
 icon-reset0xe804
 icon-merge0xe805
 icon-tab0xe806
 icon-splitter0xe807
 icon-columns0xe808
 icon-row0xe809
 icon-w0xe80a
 icon-download-doc0xe80b
 icon-lock-block0xe80c
 icon-cart-block0xe80d
 icon-hidden0xe80e
 icon-happy0xe80f
 icon-spin0xe810
 icon-search0xe811
 icon-mail-alt0xe812
 icon-star0xe813
 icon-th-large0xe814
 icon-ok0xe815
 icon-barcodereader0xe816
 icon-view-columan0xe817
 icon-minus0xe818
 icon-help0xe819
 icon-help-circled0xe81a
 icon-info-circled0xe81b
 icon-info0xe81c
 icon-link0xe81d
 icon-unlink0xe81e
 icon-link-ext0xe81f
 icon-link-ext-alt0xe820
 icon-attach0xe821
 icon-lock0xe822
 icon-lock-open0xe823
 icon-pin0xe824
 icon-eye0xe825
 icon-eye-off0xe826
 icon-tag0xe827
 icon-tags0xe828
 icon-bookmark0xe829
 icon-flag0xe82a
 icon-thumbs-up0xe82b
 icon-thumbs-down0xe82c
 icon-thumbs-up-alt0xe82d
 icon-thumbs-down-alt0xe82e
 icon-download-data0xe82f
 icon-upload0xe830
 icon-download-cloud0xe831
 icon-upload-cloud0xe832
 icon-reply0xe833
 icon-reply-all0xe834
 icon-forward0xe835
 icon-code0xe836
 icon-export0xe837
 icon-export-alt0xe838
 icon-pencil0xe839
 icon-v0xe83a
 icon-edit0xe83b
 icon-print0xe83c
 icon-retweet0xe83d
 icon-r0xe83e
 icon-comment0xe83f
 icon-chat0xe840
 icon-comment-empty0xe841
 icon-chat-empty0xe842
 icon-bell-alt0xe843
 icon-attention0xe844
 icon-trash0xe845
 icon-doc-text0xe846
 icon-p0xe847
 icon-m0xe848
 icon-file-pdf0xe849
 icon-file-word0xe84a
 icon-file-excel0xe84b
 icon-file-powerpoint0xe84c
 icon-file-image0xe84d
 icon-folder0xe84e
 icon-folder-open0xe84f
 icon-note0xe850
 icon-cog0xe851
 icon-cog-alt0xe852
 icon-wrench0xe853
 icon-calendar0xe854
 icon-calendar-empty0xe855
 icon-login0xe856
 icon-logout0xe857
 icon-move0xe858
 icon-down-dir0xe859
 icon-up-dir0xe85a
 icon-down-open0xe85b
 icon-left-open0xe85c
 icon-right-open0xe85d
 icon-up-open0xe85e
 icon-down-big0xe85f
 icon-left-big0xe860
 icon-right-big0xe861
 icon-up-big0xe862
 icon-right-hand0xe863
 icon-left-hand0xe864
 icon-history0xe865
 icon-play-circled0xe866
 icon-to-end0xe867
 icon-to-end-alt0xe868
 icon-to-start0xe869
 icon-to-start-alt0xe86a
 icon-fast-fw0xe86b
 icon-fast-bw0xe86c
 icon-desktop0xe86d
 icon-inbox0xe86e
 icon-umbrella0xe86f
 icon-flight0xe870
 icon-paper-plane0xe871
 icon-leaf0xe872
 icon-ks0xe873
 icon-ellipsis0xe874
 icon-ellipsis-vert0xe875
 icon-list-alt0xe876
 icon-rocket0xe877
 icon-cab0xe878
 icon-truck0xe879
 icon-dollar0xe87a
 icon-sort-alt-up0xe87b
 icon-sort-alt-down0xe87c
 icon-sort-name-up0xe87d
 icon-sort-name-down0xe87e
 icon-sort-number-up0xe87f
 icon-sort-number-down0xe880
 icon-hammer0xe881
 icon-coffee0xe882
 icon-food0xe883
 icon-hospital0xe884
 icon-building0xe885
 icon-puzzle0xe886
 icon-cube0xe887
 icon-cubes0xe888
 icon-lifebuoy0xe889
 icon-user0xe88a
 icon-users0xe88b
 icon-home0xe88c
 icon-bookmarks0xe88d
 icon-keyboard0xe88e
 icon-vcard0xe88f
 icon-docs0xe890
 icon-tools0xe891
 icon-km0xe892
 icon-sound0xe893
 icon-window0xe894
 icon-left-open-mini0xe895
 icon-right-open-mini0xe896
 icon-list-add0xe897
 icon-briefcase0xe898
 icon-chart-line0xe899
 icon-graduation-cap0xe89a
 icon-floppy0xe89b
 icon-clipboard0xe89c
 icon-key0xe89d
 icon-doc-add0xe89e
 icon-basket0xe89f
 icon-sun0xe8a0
 icon-ka0xe8a1
 icon-cloud0xe8a2
 icon-moon0xe8a3
 icon-k0xe8a4
 icon-cloud-sun0xe8a5
 icon-drizzle0xe8a6
 icon-snow-10xe8a7
 icon-cloud-flash0xe8a8
 icon-cloud-wind0xe8a9
 icon-wind0xe8aa
 icon-temperatire0xe8ab
 icon-chart-bar0xe8ac
 icon-pending0xe8ad
 icon-pencil-alt0xe8ae
 icon-newsletter0xe8af
 icon-play-circle0xe8b0
 icon-c0xe8b1
 icon-z0xe8b2
 icon-xf0xe8b3
 icon-x0xe8b4
 icon-wt0xe8b5
 icon-award0xe8b6
 icon-grid0xe8b7
 icon-money0xe8b8
 icon-windy-rain-inv0xe8b9
 icon-snow-i0xe8ba
 icon-snow-heavy-inv0xe8bb
 icon-hail0xe8bc
 icon-kit0xe8bd
 icon-clouds-flash-inv0xe8be
 icon-temperature0xe8bf
 icon-compass0xe8c0
 icon-na0xe8c1
 icon-fahrenheit0xe8c2
 icon-clouds-flash-alt0xe8c3
 icon-sar0xe8c4
 icon-moon-inv0xe8c5
 icon-cloud-sun-inv0xe8c6
 icon-cloud-moon-inv0xe8c7
 icon-cloud-inv0xe8c8
 icon-cloud-flash-inv0xe8c9
 icon-drizzle-inv0xe8ca
 icon-rain0xe8cb
 icon-windy-inv0xe8cc
 icon-sunrise0xe8cd
 icon-plus0xe8ce
 icon-cancel0xe8cf
 icon-eclipse0xe8d0
 icon-mist0xe8d1
 icon-progress0xe8d3
 icon-task0xe8d4
 icon-cloud-moon0xe8d5
 icon-fog-sun0xe8d6
 icon-fog-moon0xe8d7
 icon-fog-cloud0xe8d8
 icon-fog0xe8d9
 icon-barcodereader-s-hide0xe8da
 icon-wx0xe8db
 icon-cloud-flash-alt0xe8dc
 icon-open-task0xe8dd
 icon-doc-preview0xe8de
 icon-windy0xe8df
 icon-windy-rain0xe8e0
 icon-archive0xe8e1
 icon-open-my-task0xe8e2
 icon-snow-heavy0xe8e3
 icon-doublearrow-left0xe8e4
 icon-clouds0xe8e5
 icon-clouds-flash0xe8e6
 icon-social0xe8e7
 icon-smiley-circled0xe8e8
 icon-address-book0xe8e9
 icon-delicious0xe8ea
 icon-digg0xe8eb
 icon-doublearrow-right0xe8ec
 icon-megaphone0xe8ed
 icon-down-hand0xe8ee
 icon-globe0xe8ef
 icon-tour0xe8f0
 icon-putaway0xe8f1
 icon-alternative0xe8f2
 icon-customer0xe8f3
 icon-supplier0xe8f4
 icon-keyboard-s-hide0xe8f5
 icon-keyboard-s0xe8f6
 icon-doublearrow-down0xe8f7
 icon-profile-title0xe8f8
 icon-doublearrow-up0xe8f9
 icon-restart0xe8fa
 icon-keyboard-arrow0xe8fb
 icon-stop0xe8fc
 icon-clock0xe8fd
 icon-denied0xe8fe
 icon-approved0xe8ff
 icon-approve0xe900
 icon-menu0xe901
 icon-request0xe902
 icon-required0xe903
 icon-notebook0xe904
 icon-yahoo0xe905
 icon-gmail0xe906
 icon-outlook0xe907
 icon-ios0xe908
 icon-phone0xe909
 icon-download0xe90a
 icon-copy-url0xe90b
 icon-activity0xe90c
 icon-pin-fix0xe90d
 icon-list-view0xe90e
 icon-view0xe90f
 icon-board-view0xe910
 icon-copy0xe911
 icon-minus-circled0xe912
 icon-meeting0xe913
 icon-doc-remove0xe916
 icon-filter0xf0b0
 icon-facebook0xf30e