membuat icon pada ionic

Tutorial Ionic Part 10 : Icon Pada Ionic


Tutorial Ionic Part 10 : Icon Pada Ionic -oke, kita lanjutkan pembahasan tutorial ini, sesuai judulnya pada artikel kali ini akan kita bahas mengenai icon pada ionic.

Untuk membuat tampilan yang lebih menarik kita memerlukan icon untuk mendukung tampilan yang kita desain. ada lebih dari 700 icon yang disediakan oleh ionic, kita hanya tinggal menggunakan nya saja, itu lah salah satu kelebihan kenapa kita menggunakan framework ionic ini.

Icon Pada Ionic

Hampir semua icon yang kita butuhkan untuk desain aplikasi sudah disiapkan oleh ionic. selain kita menggunakan icon yang sudah disiapkan oleh ionic, kita juga bisa menggunakan icon yang kita desain sendiri. anda dapat melihat keseluruhan icon ionic disini (ionicons).

ok, berikut contoh penggunaan icon dalam aplikasi ionic.

Icon Pada Ionic

Icon Pada Ionic

itu salah satu contoh penggunaan icon pada ionic.

Untuk menggunakan icon ini, ionic telah menyediakan class untuk icon tersebut. sehingga ini sangat membantu kita dalam membuat aplikais. oke, berikut beberapa icon yang sudah desediakan oleh ionic.

Icon Hasil
<i class=”icon ion-ionic”></i>
<i class=”icon ion-arrow-up-a”></i>
<i class=”icon ion-arrow-right-a”></i>
<i class=”icon ion-arrow-down-a”></i>
<i class=”icon ion-arrow-left-a”></i>
<i class=”icon ion-arrow-up-b”></i>
<i class=”icon ion-arrow-right-b”></i>
<i class=”icon ion-arrow-down-b”></i>
<i class=”icon ion-arrow-left-b”></i>
<i class=”icon ion-arrow-up-c”></i>
<i class=”icon ion-arrow-right-c”></i>
<i class=”icon ion-arrow-down-c”></i>
<i class=”icon ion-arrow-left-c”></i>
<i class=”icon ion-arrow-return-right”></i>
<i class=”icon ion-arrow-return-left”></i>
<i class=”icon ion-arrow-swap”></i>
<i class=”icon ion-arrow-shrink”></i>
<i class=”icon ion-arrow-expand”></i>
<i class=”icon ion-arrow-move”></i>
<i class=”icon ion-arrow-resize”></i>
<i class=”icon ion-chevron-up”></i>
<i class=”icon ion-chevron-right”></i>
<i class=”icon ion-chevron-down”></i>
<i class=”icon ion-chevron-left”></i>
<i class=”icon ion-navicon-round”></i>
<i class=”icon ion-navicon”></i>
<i class=”icon ion-drag”></i>
<i class=”icon ion-log-in”></i>
<i class=”icon ion-log-out”></i>
<i class=”icon ion-checkmark-round”></i>
<i class=”icon ion-checkmark”></i>
<i class=”icon ion-checkmark-circled”></i>
<i class=”icon ion-close-round”></i>
<i class=”icon ion-close”></i>
<i class=”icon ion-close-circled”></i>
<i class=”icon ion-plus-round”></i>
<i class=”icon ion-plus”></i>
<i class=”icon ion-plus-circled”></i>
<i class=”icon ion-minus-round”></i>
<i class=”icon ion-minus”></i>
<i class=”icon ion-minus-circled”></i>
<i class=”icon ion-information”></i>
<i class=”icon ion-informaticon ion-circled”></i>
<i class=”icon ion-help”></i>
<i class=”icon ion-help-circled”></i>
<i class=”icon ion-backspace-outline”></i>
<i class=”icon ion-backspace”></i>
<i class=”icon ion-help-buoy”></i>
<i class=”icon ion-asterisk”></i>
<i class=”icon ion-alert”></i>
<i class=”icon ion-alert-circled”></i>
<i class=”icon ion-refresh”></i>
<i class=”icon ion-loop”></i>
<i class=”icon ion-shuffle”></i>
<i class=”icon ion-home”></i>
<i class=”icon ion-search”></i>
<i class=”icon ion-flag”></i>
<i class=”icon ion-star”></i>
<i class=”icon ion-heart”></i>
<i class=”icon ion-heart-broken”></i>
<i class=”icon ion-gear-a”></i>
<i class=”icon ion-gear-b”></i>
<i class=”icon ion-toggle-filled”></i>
<i class=”icon ion-toggle”></i>
<i class=”icon ion-settings”></i>
<i class=”icon ion-wrench”></i>
<i class=”icon ion-hammer”></i>
<i class=”icon ion-edit”></i>
<i class=”icon ion-trash-a”></i>
<i class=”icon ion-trash-b”></i>
<i class=”icon ion-document”></i>
<i class=”icon ion-document-text”></i>
<i class=”icon ion-clipboard”></i>
<i class=”icon ion-scissors”></i>
<i class=”icon ion-funnel”></i>
<i class=”icon ion-bookmark”></i>
<i class=”icon ion-email”></i>
<i class=”icon ion-email-unread”></i>
<i class=”icon ion-folder”></i>
<i class=”icon ion-filing”></i>
<i class=”icon ion-archive”></i>
<i class=”icon ion-reply”></i>
<i class=”icon ion-reply-all”></i>
<i class=”icon ion-forward”></i>
<i class=”icon ion-share”></i>
<i class=”icon ion-paper-airplane”></i>
<i class=”icon ion-link”></i>
<i class=”icon ion-paperclip”></i>
<i class=”icon ion-compose”></i>
<i class=”icon ion-briefcase”></i>
<i class=”icon ion-medkit”></i>
<i class=”icon ion-at”></i>
<i class=”icon ion-pound”></i>
<i class=”icon ion-quote”></i>
<i class=”icon ion-cloud”></i>
<i class=”icon ion-upload”></i>
<i class=”icon ion-more”></i>
<i class=”icon ion-grid”></i>
<i class=”icon ion-calendar”></i>
<i class=”icon ion-clock”></i>
<i class=”icon ion-compass”></i>
<i class=”icon ion-pinpoint”></i>
<i class=”icon ion-pin”></i>
<i class=”icon ion-navigate”></i>
<i class=”icon ion-location”></i>
<i class=”icon ion-map”></i>
<i class=”icon ion-lock-combination”></i>
<i class=”icon ion-locked”></i>
<i class=”icon ion-unlocked”></i>
<i class=”icon ion-key”></i>
<i class=”icon ion-arrow-graph-up-right”></i>
<i class=”icon ion-arrow-graph-down-right”></i>
<i class=”icon ion-arrow-graph-up-left”></i>
<i class=”icon ion-arrow-graph-down-left”></i>
<i class=”icon ion-stats-bars”></i>
<i class=”icon ion-connecticon ion-bars”></i>
<i class=”icon ion-pie-graph”></i>
<i class=”icon ion-chatbubble”></i>
<i class=”icon ion-chatbubble-working”></i>
<i class=”icon ion-chatbubbles”></i>
<i class=”icon ion-chatbox”></i>
<i class=”icon ion-chatbox-working”></i>
<i class=”icon ion-chatboxes”></i>
<i class=”icon ion-person”></i>
<i class=”icon ion-person-add”></i>
<i class=”icon ion-person-stalker”></i>
<i class=”icon ion-woman”></i>
<i class=”icon ion-man”></i>
<i class=”icon ion-female”></i>
<i class=”icon ion-male”></i>
<i class=”icon ion-transgender”></i>
<i class=”icon ion-fork”></i>
<i class=”icon ion-knife”></i>
<i class=”icon ion-spoon”></i>
<i class=”icon ion-soup-can-outline”></i>
<i class=”icon ion-soup-can”></i>
<i class=”icon ion-beer”></i>
<i class=”icon ion-wineglass”></i>
<i class=”icon ion-coffee”></i>
<i class=”icon ion-icecream”></i>
<i class=”icon ion-pizza”></i>
<i class=”icon ion-power”></i>
<i class=”icon ion-mouse”></i>
<i class=”icon ion-battery-full”></i>
<i class=”icon ion-battery-half”></i>
<i class=”icon ion-battery-low”></i>
<i class=”icon ion-battery-empty”></i>
<i class=”icon ion-battery-charging”></i>
<i class=”icon ion-wifi”></i>
<i class=”icon ion-bluetooth”></i>
<i class=”icon ion-calculator”></i>
<i class=”icon ion-camera”></i>
<i class=”icon ion-eye”></i>
<i class=”icon ion-eye-disabled”></i>
<i class=”icon ion-flash”></i>
<i class=”icon ion-flash-off”></i>
<i class=”icon ion-qr-scanner”></i>
<i class=”icon ion-image”></i>
<i class=”icon ion-images”></i>
<i class=”icon ion-wand”></i>
<i class=”icon ion-contrast”></i>
<i class=”icon ion-aperture”></i>
<i class=”icon ion-crop”></i>
<i class=”icon ion-easel”></i>
<i class=”icon ion-paintbrush”></i>
<i class=”icon ion-paintbucket”></i>
<i class=”icon ion-monitor”></i>
<i class=”icon ion-laptop”></i>
<i class=”icon ion-ipad”></i>
<i class=”icon ion-iphone”></i>
<i class=”icon ion-ipod”></i>
<i class=”icon ion-printer”></i>
<i class=”icon ion-usb”></i>
<i class=”icon ion-outlet”></i>
<i class=”icon ion-bug”></i>
<i class=”icon ion-code”></i>
<i class=”icon ion-code-working”></i>
<i class=”icon ion-code-download”></i>
<i class=”icon ion-fork-repo”></i>
<i class=”icon ion-network”></i>
<i class=”icon ion-pull-request”></i>
<i class=”icon ion-merge”></i>
<i class=”icon ion-xbox”></i>
<i class=”icon ion-playstation”></i>
<i class=”icon ion-steam”></i>
<i class=”icon ion-closed-captioning”></i>
<i class=”icon ion-videocamera”></i>
<i class=”icon ion-film-marker”></i>
<i class=”icon ion-disc”></i>
<i class=”icon ion-headphone”></i>
<i class=”icon ion-music-note”></i>
<i class=”icon ion-radio-waves”></i>
<i class=”icon ion-speakerphone”></i>
<i class=”icon ion-mic-a”></i>
<i class=”icon ion-mic-b”></i>
<i class=”icon ion-mic-c”></i>
<i class=”icon ion-volume-high”></i>
<i class=”icon ion-volume-medium”></i>
<i class=”icon ion-volume-low”></i>
<i class=”icon ion-volume-mute”></i>
<i class=”icon ion-levels”></i>
<i class=”icon ion-play”></i>
<i class=”icon ion-pause”></i>
<i class=”icon ion-stop”></i>
<i class=”icon ion-record”></i>
<i class=”icon ion-skip-forward”></i>
<i class=”icon ion-skip-backward”></i>
<i class=”icon ion-eject”></i>
<i class=”icon ion-bag”></i>
<i class=”icon ion-card”></i>
<i class=”icon ion-cash”></i>
<i class=”icon ion-pricetag”></i>
<i class=”icon ion-pricetags”></i>
<i class=”icon ion-thumbsup”></i>
<i class=”icon ion-thumbsdown”></i>
<i class=”icon ion-happy-outline”></i>
<i class=”icon ion-happy”></i>
<i class=”icon ion-sad-outline”></i>
<i class=”icon ion-sad”></i>
<i class=”icon ion-bowtie”></i>
<i class=”icon ion-tshirt-outline”></i>
<i class=”icon ion-tshirt”></i>
<i class=”icon ion-trophy”></i>
<i class=”icon ion-podium”></i>
<i class=”icon ion-ribbon-a”></i>
<i class=”icon ion-ribbon-b”></i>
<i class=”icon ion-university”></i>
<i class=”icon ion-magnet”></i>
<i class=”icon ion-beaker”></i>
<i class=”icon ion-erlenmeyer-flask”></i>
<i class=”icon ion-egg”></i>
<i class=”icon ion-earth”></i>
<i class=”icon ion-planet”></i>
<i class=”icon ion-lightbulb”></i>
<i class=”icon ion-cube”></i>
<i class=”icon ion-leaf”></i>
<i class=”icon ion-waterdrop”></i>
<i class=”icon ion-flame”></i>
<i class=”icon ion-fireball”></i>
<i class=”icon ion-bonfire”></i>
<i class=”icon ion-umbrella”></i>
<i class=”icon ion-nuclear”></i>
<i class=”icon ion-no-smoking”></i>
<i class=”icon ion-thermometer”></i>
<i class=”icon ion-speedometer”></i>
<i class=”icon ion-model-s”></i>
<i class=”icon ion-plane”></i>
<i class=”icon ion-jet”></i>
<i class=”icon ion-load-a”></i>
<i class=”icon ion-load-b”></i>
<i class=”icon ion-load-c”></i>
<i class=”icon ion-load-d”></i>

Icon iOS Pada Ionic

Icon Hasil
<i class=”icon ion-ios-ionic-outline”></i>
<i class=”icon ion-ios-arrow-back”></i>
<i class=”icon ion-ios-arrow-forward”></i>
<i class=”icon ion-ios-arrow-up”></i>
<i class=”icon ion-ios-arrow-right”></i>
<i class=”icon ion-ios-arrow-down”></i>
<i class=”icon ion-ios-arrow-left”></i>
<i class=”icon ion-ios-arrow-thin-up”></i>
<i class=”icon ion-ios-arrow-thin-right”></i>
<i class=”icon ion-ios-arrow-thin-down”></i>
<i class=”icon ion-ios-arrow-thin-left”></i>
<i class=”icon ion-ios-circle-filled”></i>
<i class=”icon ion-ios-circle-outline”></i>
<i class=”icon ion-ios-checkmark-empty”></i>
<i class=”icon ion-ios-checkmark-outline”></i>
<i class=”icon ion-ios-checkmark”></i>
<i class=”icon ion-ios-plus-empty”></i>
<i class=”icon ion-ios-plus-outline”></i>
<i class=”icon ion-ios-plus”></i>
<i class=”icon ion-ios-close-empty”></i>
<i class=”icon ion-ios-close-outline”></i>
<i class=”icon ion-ios-close”></i>
<i class=”icon ion-ios-minus-empty”></i>
<i class=”icon ion-ios-minus-outline”></i>
<i class=”icon ion-ios-minus”></i>
<i class=”icon ion-ios-informaticon ion-empty”></i>
<i class=”icon ion-ios-informaticon ion-outline”></i>
<i class=”icon ion-ios-information”></i>
<i class=”icon ion-ios-help-empty”></i>
<i class=”icon ion-ios-help-outline”></i>
<i class=”icon ion-ios-help”></i>
<i class=”icon ion-ios-search”></i>
<i class=”icon ion-ios-search-strong”></i>
<i class=”icon ion-ios-star”></i>
<i class=”icon ion-ios-star-half”></i>
<i class=”icon ion-ios-star-outline”></i>
<i class=”icon ion-ios-heart”></i>
<i class=”icon ion-ios-heart-outline”></i>
<i class=”icon ion-ios-more”></i>
<i class=”icon ion-ios-more-outline”></i>
<i class=”icon ion-ios-home”></i>
<i class=”icon ion-ios-home-outline”></i>
<i class=”icon ion-ios-cloud”></i>
<i class=”icon ion-ios-cloud-outline”></i>
<i class=”icon ion-ios-cloud-upload”></i>
<i class=”icon ion-ios-cloud-upload-outline”></i>
<i class=”icon ion-ios-cloud-download”></i>
<i class=”icon ion-ios-cloud-download-outline”></i>
<i class=”icon ion-ios-upload”></i>
<i class=”icon ion-ios-upload-outline”></i>
<i class=”icon ion-ios-download”></i>
<i class=”icon ion-ios-download-outline”></i>
<i class=”icon ion-ios-refresh”></i>
<i class=”icon ion-ios-refresh-outline”></i>
<i class=”icon ion-ios-refresh-empty”></i>
<i class=”icon ion-ios-reload”></i>
<i class=”icon ion-ios-loop-strong”></i>
<i class=”icon ion-ios-loop”></i>
<i class=”icon ion-ios-bookmarks”></i>
<i class=”icon ion-ios-bookmarks-outline”></i>
<i class=”icon ion-ios-book”></i>
<i class=”icon ion-ios-book-outline”></i>
<i class=”icon ion-ios-flag”></i>
<i class=”icon ion-ios-flag-outline”></i>
<i class=”icon ion-ios-glasses”></i>
<i class=”icon ion-ios-glasses-outline”></i>
<i class=”icon ion-ios-browsers”></i>
<i class=”icon ion-ios-browsers-outline”></i>
<i class=”icon ion-ios-at”></i>
<i class=”icon ion-ios-at-outline”></i>
<i class=”icon ion-ios-pricetag”></i>
<i class=”icon ion-ios-pricetag-outline”></i>
<i class=”icon ion-ios-pricetags”></i>
<i class=”icon ion-ios-pricetags-outline”></i>
<i class=”icon ion-ios-cart”></i>
<i class=”icon ion-ios-cart-outline”></i>
<i class=”icon ion-ios-chatboxes”></i>
<i class=”icon ion-ios-chatboxes-outline”></i>
<i class=”icon ion-ios-chatbubble”></i>
<i class=”icon ion-ios-chatbubble-outline”></i>
<i class=”icon ion-ios-cog”></i>
<i class=”icon ion-ios-cog-outline”></i>
<i class=”icon ion-ios-gear”></i>
<i class=”icon ion-ios-gear-outline”></i>
<i class=”icon ion-ios-settings”></i>
<i class=”icon ion-ios-settings-strong”></i>
<i class=”icon ion-ios-toggle”></i>
<i class=”icon ion-ios-toggle-outline”></i>
<i class=”icon ion-ios-analytics”></i>
<i class=”icon ion-ios-analytics-outline”></i>
<i class=”icon ion-ios-pie”></i>
<i class=”icon ion-ios-pie-outline”></i>
<i class=”icon ion-ios-pulse”></i>
<i class=”icon ion-ios-pulse-strong”></i>
<i class=”icon ion-ios-filing”></i>
<i class=”icon ion-ios-filing-outline”></i>
<i class=”icon ion-ios-box”></i>
<i class=”icon ion-ios-box-outline”></i>
<i class=”icon ion-ios-compose”></i>
<i class=”icon ion-ios-compose-outline”></i>
<i class=”icon ion-ios-trash”></i>
<i class=”icon ion-ios-trash-outline”></i>
<i class=”icon ion-ios-copy”></i>
<i class=”icon ion-ios-copy-outline”></i>
<i class=”icon ion-ios-email”></i>
<i class=”icon ion-ios-email-outline”></i>
<i class=”icon ion-ios-undo”></i>
<i class=”icon ion-ios-undo-outline”></i>
<i class=”icon ion-ios-redo”></i>
<i class=”icon ion-ios-redo-outline”></i>
<i class=”icon ion-ios-paperplane”></i>
<i class=”icon ion-ios-paperplane-outline”></i>
<i class=”icon ion-ios-folder”></i>
<i class=”icon ion-ios-folder-outline”></i>
<i class=”icon ion-ios-paper”></i>
<i class=”icon ion-ios-paper-outline”></i>
<i class=”icon ion-ios-list”></i>
<i class=”icon ion-ios-list-outline”></i>
<i class=”icon ion-ios-world”></i>
<i class=”icon ion-ios-world-outline”></i>
<i class=”icon ion-ios-alarm”></i>
<i class=”icon ion-ios-alarm-outline”></i>
<i class=”icon ion-ios-speedometer”></i>
<i class=”icon ion-ios-speedometer-outline”></i>
<i class=”icon ion-ios-stopwatch”></i>
<i class=”icon ion-ios-stopwatch-outline”></i>
<i class=”icon ion-ios-timer”></i>
<i class=”icon ion-ios-timer-outline”></i>
<i class=”icon ion-ios-clock”></i>
<i class=”icon ion-ios-clock-outline”></i>
<i class=”icon ion-ios-time”></i>
<i class=”icon ion-ios-time-outline”></i>
<i class=”icon ion-ios-calendar”></i>
<i class=”icon ion-ios-calendar-outline”></i>
<i class=”icon ion-ios-photos”></i>
<i class=”icon ion-ios-photos-outline”></i>
<i class=”icon ion-ios-albums”></i>
<i class=”icon ion-ios-albums-outline”></i>
<i class=”icon ion-ios-camera”></i>
<i class=”icon ion-ios-camera-outline”></i>
<i class=”icon ion-ios-reverse-camera”></i>
<i class=”icon ion-ios-reverse-camera-outline”></i>
<i class=”icon ion-ios-eye”></i>
<i class=”icon ion-ios-eye-outline”></i>
<i class=”icon ion-ios-bolt”></i>
<i class=”icon ion-ios-bolt-outline”></i>
<i class=”icon ion-ios-color-wand”></i>
<i class=”icon ion-ios-color-wand-outline”></i>
<i class=”icon ion-ios-color-filter”></i>
<i class=”icon ion-ios-color-filter-outline”></i>
<i class=”icon ion-ios-grid-view”></i>
<i class=”icon ion-ios-grid-view-outline”></i>
<i class=”icon ion-ios-crop-strong”></i>
<i class=”icon ion-ios-crop”></i>
<i class=”icon ion-ios-barcode”></i>
<i class=”icon ion-ios-barcode-outline”></i>
<i class=”icon ion-ios-briefcase”></i>
<i class=”icon ion-ios-briefcase-outline”></i>
<i class=”icon ion-ios-medkit”></i>
<i class=”icon ion-ios-medkit-outline”></i>
<i class=”icon ion-ios-medical”></i>
<i class=”icon ion-ios-medical-outline”></i>
<i class=”icon ion-ios-infinite”></i>
<i class=”icon ion-ios-infinite-outline”></i>
<i class=”icon ion-ios-calculator”></i>
<i class=”icon ion-ios-calculator-outline”></i>
<i class=”icon ion-ios-keypad”></i>
<i class=”icon ion-ios-keypad-outline”></i>
<i class=”icon ion-ios-telephone”></i>
<i class=”icon ion-ios-telephone-outline”></i>
<i class=”icon ion-ios-drag”></i>
<i class=”icon ion-ios-location”></i>
<i class=”icon ion-ios-locaticon ion-outline”></i>
<i class=”icon ion-ios-navigate”></i>
<i class=”icon ion-ios-navigate-outline”></i>
<i class=”icon ion-ios-locked”></i>
<i class=”icon ion-ios-locked-outline”></i>
<i class=”icon ion-ios-unlocked”></i>
<i class=”icon ion-ios-unlocked-outline”></i>
<i class=”icon ion-ios-monitor”></i>
<i class=”icon ion-ios-monitor-outline”></i>
<i class=”icon ion-ios-printer”></i>
<i class=”icon ion-ios-printer-outline”></i>
<i class=”icon ion-ios-game-controller-a”></i>
<i class=”icon ion-ios-game-controller-a-outline”></i>
<i class=”icon ion-ios-game-controller-b”></i>
<i class=”icon ion-ios-game-controller-b-outline”></i>
<i class=”icon ion-ios-americanfootball”></i>
<i class=”icon ion-ios-americanfootball-outline”></i>
<i class=”icon ion-ios-baseball”></i>
<i class=”icon ion-ios-baseball-outline”></i>
<i class=”icon ion-ios-basketball”></i>
<i class=”icon ion-ios-basketball-outline”></i>gt;
<i class=”icon ion-ios-tennisball”></i>
<i class=”icon ion-ios-tennisball-outline”></i>
<i class=”icon ion-ios-football”></i>
<i class=”icon ion-ios-football-outline”></i>
<i class=”icon ion-ios-body”></i>
<i class=”icon ion-ios-body-outline”></i>
<i class=”icon ion-ios-person”></i>
<i class=”icon ion-ios-person-outline”></i>
<i class=”icon ion-ios-personadd”></i>
<i class=”icon ion-ios-personadd-outline”></i>
<i class=”icon ion-ios-people”></i>
<i class=”icon ion-ios-people-outline”></i>
<i class=”icon ion-ios-musical-notes”></i>
<i class=”icon ion-ios-musical-note”></i>
<i class=”icon ion-ios-bell”></i>
<i class=”icon ion-ios-bell-outline”></i>
<i class=”icon ion-ios-mic”></i>
<i class=”icon ion-ios-mic-outline”></i>
<i class=”icon ion-ios-mic-off”></i>
<i class=”icon ion-ios-volume-high”></i>
<i class=”icon ion-ios-volume-low”></i>
<i class=”icon ion-ios-play”></i>
<i class=”icon ion-ios-play-outline”></i>
<i class=”icon ion-ios-pause”></i>
<i class=”icon ion-ios-pause-outline”></i>
<i class=”icon ion-ios-recording”></i>
<i class=”icon ion-ios-recording-outline”></i>
<i class=”icon ion-ios-fastforward”></i>
<i class=”icon ion-ios-fastforward-outline”></i>
<i class=”icon ion-ios-rewind”></i>
<i class=”icon ion-ios-rewind-outline”></i>
<i class=”icon ion-ios-skipbackward”></i>
<i class=”icon ion-ios-skipbackward-outline”></i>
<i class=”icon ion-ios-skipforward”></i>
<i class=”icon ion-ios-skipforward-outline”></i>
<i class=”icon ion-ios-shuffle-strong”></i>
<i class=”icon ion-ios-shuffle”></i>
<i class=”icon ion-ios-videocam”></i>
<i class=”icon ion-ios-videocam-outline”></i>
<i class=”icon ion-ios-film”></i>
<i class=”icon ion-ios-film-outline”></i>
<i class=”icon ion-ios-flask”></i>
<i class=”icon ion-ios-flask-outline”></i>
<i class=”icon ion-ios-lightbulb”></i>
<i class=”icon ion-ios-lightbulb-outline”></i>
<i class=”icon ion-ios-wineglass”></i>
<i class=”icon ion-ios-wineglass-outline”></i>
<i class=”icon ion-ios-pint”></i>
<i class=”icon ion-ios-pint-outline”></i>
<i class=”icon ion-ios-nutrition”></i>
<i class=”icon ion-ios-nutriticon ion-outline”></i>
<i class=”icon ion-ios-flower”></i>
<i class=”icon ion-ios-flower-outline”></i>
<i class=”icon ion-ios-rose”></i>
<i class=”icon ion-ios-rose-outline”></i>
<i class=”icon ion-ios-paw”></i>
<i class=”icon ion-ios-paw-outline”></i>
<i class=”icon ion-ios-flame”></i>
<i class=”icon ion-ios-flame-outline”></i>
<i class=”icon ion-ios-sunny”></i>
<i class=”icon ion-ios-sunny-outline”></i>
<i class=”icon ion-ios-partlysunny”></i>
<i class=”icon ion-ios-partlysunny-outline”></i>
<i class=”icon ion-ios-cloudy”></i>
<i class=”icon ion-ios-cloudy-outline”></i>
<i class=”icon ion-ios-rainy”></i>
<i class=”icon ion-ios-rainy-outline”></i>
<i class=”icon ion-ios-thunderstorm”></i>
<i class=”icon ion-ios-thunderstorm-outline”></i>
<i class=”icon ion-ios-snowy”></i>
<i class=”icon ion-ios-moon”></i>
<i class=”icon ion-ios-moon-outline”></i>
<i class=”icon ion-ios-cloudy-night”></i>
<i class=”icon ion-ios-cloudy-night-outline”></i>

Icon Android Pada Ionic

Icon Hasil
<i class=”icon ion-android-arrow-up”></i>
<i class=”icon ion-android-arrow-forward”></i>
<i class=”icon ion-android-arrow-down”></i>
<i class=”icon ion-android-arrow-back”></i>
<i class=”icon ion-android-arrow-dropup”></i>
<i class=”icon ion-android-arrow-dropup-circle”></i>
<i class=”icon ion-android-arrow-dropright”></i>
<i class=”icon ion-android-arrow-dropright-circle”></i>
<i class=”icon ion-android-arrow-dropdown”></i>
<i class=”icon ion-android-arrow-dropdown-circle”></i>
<i class=”icon ion-android-arrow-dropleft”></i>
<i class=”icon ion-android-arrow-dropleft-circle”></i>
<i class=”icon ion-android-add”></i>
<i class=”icon ion-android-add-circle”></i>
<i class=”icon ion-android-remove”></i>
<i class=”icon ion-android-remove-circle”></i>
<i class=”icon ion-android-close”></i>
<i class=”icon ion-android-cancel”></i>
<i class=”icon ion-android-radio-button-off”></i>
<i class=”icon ion-android-radio-button-on”></i>
<i class=”icon ion-android-checkmark-circle”></i>
<i class=”icon ion-android-checkbox-outline-blank”></i>
<i class=”icon ion-android-checkbox-outline”></i>
<i class=”icon ion-android-checkbox-blank”></i>
<i class=”icon ion-android-checkbox”></i>
<i class=”icon ion-android-done”></i>
<i class=”icon ion-android-done-all”></i>
<i class=”icon ion-android-menu”></i>
<i class=”icon ion-android-more-horizontal”></i>
<i class=”icon ion-android-more-vertical”></i>
<i class=”icon ion-android-refresh”></i>
<i class=”icon ion-android-sync”></i>
<i class=”icon ion-android-wifi”></i>
<i class=”icon ion-android-call”></i>
<i class=”icon ion-android-apps”></i>
<i class=”icon ion-android-settings”></i>
<i class=”icon ion-android-options”></i>
<i class=”icon ion-android-funnel”></i>
<i class=”icon ion-android-search”></i>
<i class=”icon ion-android-home”></i>
<i class=”icon ion-android-cloud-outline”></i>
<i class=”icon ion-android-cloud”></i>
<i class=”icon ion-android-download”></i>
<i class=”icon ion-android-upload”></i>
<i class=”icon ion-android-cloud-done”></i>
<i class=”icon ion-android-cloud-circle”></i>
<i class=”icon ion-android-favorite-outline”></i>
<i class=”icon ion-android-favorite”></i>
<i class=”icon ion-android-star-outline”></i>
<i class=”icon ion-android-star-half”></i>
<i class=”icon ion-android-star”></i>
<i class=”icon ion-android-calendar”></i>
<i class=”icon ion-android-alarm-clock”></i>
<i class=”icon ion-android-time”></i>
<i class=”icon ion-android-stopwatch”></i>
<i class=”icon ion-android-watch”></i>
<i class=”icon ion-android-locate”></i>
<i class=”icon ion-android-navigate”></i>
<i class=”icon ion-android-pin”></i>
<i class=”icon ion-android-compass”></i>
<i class=”icon ion-android-map”></i>
<i class=”icon ion-android-walk”></i>
<i class=”icon ion-android-bicycle”></i>
<i class=”icon ion-android-car”></i>
<i class=”icon ion-android-bus”></i>
<i class=”icon ion-android-subway”></i>
<i class=”icon ion-android-train”></i>
<i class=”icon ion-android-boat”></i>
<i class=”icon ion-android-plane”></i>
<i class=”icon ion-android-restaurant”></i>
<i class=”icon ion-android-bar”></i>
<i class=”icon ion-android-cart”></i>
<i class=”icon ion-android-camera”></i>
<i class=”icon ion-android-image”></i>
<i class=”icon ion-android-film”></i>
<i class=”icon ion-android-color-palette”></i>
<i class=”icon ion-android-create”></i>
<i class=”icon ion-android-mail”></i>
<i class=”icon ion-android-drafts”></i>
<i class=”icon ion-android-send”></i>
<i class=”icon ion-android-archive”></i>
<i class=”icon ion-android-delete”></i>
<i class=”icon ion-android-attach”></i>
<i class=”icon ion-android-share”></i>
<i class=”icon ion-android-share-alt”></i>
<i class=”icon ion-android-bookmark”></i>
<i class=”icon ion-android-document”></i>
<i class=”icon ion-android-clipboard”></i>
<i class=”icon ion-android-list”></i>
<i class=”icon ion-android-folder-open”></i>
<i class=”icon ion-android-folder”></i>
<i class=”icon ion-android-print”></i>
<i class=”icon ion-android-open”></i>
<i class=”icon ion-android-exit”></i>
<i class=”icon ion-android-contract”></i>
<i class=”icon ion-android-expand”></i>
<i class=”icon ion-android-globe”></i>
<i class=”icon ion-android-chat”></i>
<i class=”icon ion-android-textsms”></i>
<i class=”icon ion-android-hangout”></i>
<i class=”icon ion-android-happy”></i>
<i class=”icon ion-android-sad”></i>
<i class=”icon ion-android-person”></i>
<i class=”icon ion-android-people”></i>
<i class=”icon ion-android-person-add”></i>
<i class=”icon ion-android-contact”></i>
<i class=”icon ion-android-contacts”></i>
<i class=”icon ion-android-playstore”></i>
<i class=”icon ion-android-lock”></i>
<i class=”icon ion-android-unlock”></i>
<i class=”icon ion-android-microphone”></i>
<i class=”icon ion-android-microphone-off”></i>
<i class=”icon ion-android-notifications-none”></i>
<i class=”icon ion-android-notifications”></i>
<i class=”icon ion-android-notifications-off”></i>
<i class=”icon ion-android-volume-mute”></i>
<i class=”icon ion-android-volume-down”></i>
<i class=”icon ion-android-volume-up”></i>
<i class=”icon ion-android-volume-off”></i>
<i class=”icon ion-android-hand”></i>
<i class=”icon ion-android-desktop”></i>
<i class=”icon ion-android-laptop”></i>
<i class=”icon ion-android-phone-portrait”></i>
<i class=”icon ion-android-phone-landscape”></i>
<i class=”icon ion-android-bulb”></i>
<i class=”icon ion-android-sunny”></i>
<i class=”icon ion-android-alert”></i>
<i class=”icon ion-android-warning”></i>

Icon Sosial Media pada Ionic

Icon Hasil
<i class=”icon ion-social-twitter”></i>
<i class=”icon ion-social-twitter-outline”></i>
<i class=”icon ion-social-facebook”></i>
<i class=”icon ion-social-facebook-outline”></i>
<i class=”icon ion-social-googleplus”></i>
<i class=”icon ion-social-googleplus-outline”></i>
<i class=”icon ion-social-google”></i>
<i class=”icon ion-social-google-outline”></i>
<i class=”icon ion-social-dribbble”></i>
<i class=”icon ion-social-dribbble-outline”></i>
<i class=”icon ion-social-octocat”></i>
<i class=”icon ion-social-github”></i>
<i class=”icon ion-social-github-outline”></i>
<i class=”icon ion-social-instagram”></i>
<i class=”icon ion-social-instagram-outline”></i>
<i class=”icon ion-social-whatsapp”></i>
<i class=”icon ion-social-whatsapp-outline”></i>
<i class=”icon ion-social-snapchat”></i>
<i class=”icon ion-social-snapchat-outline”></i>
<i class=”icon ion-social-foursquare”></i>
<i class=”icon ion-social-foursquare-outline”></i>
<i class=”icon ion-social-pinterest”></i>
<i class=”icon ion-social-pinterest-outline”></i>
<i class=”icon ion-social-rss”></i>
<i class=”icon ion-social-rss-outline”></i>
<i class=”icon ion-social-tumblr”></i>
<i class=”icon ion-social-tumblr-outline”></i>
<i class=”icon ion-social-wordpress”></i>
<i class=”icon ion-social-wordpress-outline”></i>
<i class=”icon ion-social-reddit”></i>
<i class=”icon ion-social-reddit-outline”></i>
<i class=”icon ion-social-hackernews”></i>
<i class=”icon ion-social-hackernews-outline”></i>
<i class=”icon ion-social-designernews”></i>
<i class=”icon ion-social-designernews-outline”></i>
<i class=”icon ion-social-yahoo”></i>
<i class=”icon ion-social-yahoo-outline”></i>
<i class=”icon ion-social-buffer”></i>
<i class=”icon ion-social-buffer-outline”></i>
<i class=”icon ion-social-skype”></i>
<i class=”icon ion-social-skype-outline”></i>
<i class=”icon ion-social-linkedin”></i>
<i class=”icon ion-social-linkedin-outline”></i>
<i class=”icon ion-social-vimeo”></i>
<i class=”icon ion-social-vimeo-outline”></i>
<i class=”icon ion-social-twitch”></i>
<i class=”icon ion-social-twitch-outline”></i>
<i class=”icon ion-social-youtube”></i>
<i class=”icon ion-social-youtube-outline”></i>
<i class=”icon ion-social-dropbox”></i>
<i class=”icon ion-social-dropbox-outline”></i>
<i class=”icon ion-social-apple”></i>
<i class=”icon ion-social-apple-outline”></i>
<i class=”icon ion-social-android”></i>
<i class=”icon ion-social-android-outline”></i>
<i class=”icon ion-social-windows”></i>
<i class=”icon ion-social-windows-outline”></i>
<i class=”icon ion-social-html5″></i>
<i class=”icon ion-social-html5-outline”></i>
<i class=”icon ion-social-css3″></i>
<i class=”icon ion-social-css3-outline”></i>
<i class=”icon ion-social-javascript”></i>
<i class=”icon ion-social-javascript-outline”></i>
<i class=”icon ion-social-angular”></i>
<i class=”icon ion-social-angular-outline”></i>
<i class=”icon ion-social-nodejs”></i>
<i class=”icon ion-social-sass”></i>
<i class=”icon ion-social-python”></i>
<i class=”icon ion-social-chrome”></i>
<i class=”icon ion-social-chrome-outline”></i>
<i class=”icon ion-social-codepen”></i>
<i class=”icon ion-social-codepen-outline”></i>
<i class=”icon ion-social-markdown”></i>
<i class=”icon ion-social-tux”></i>
<i class=”icon ion-social-freebsd-devil”></i>
<i class=”icon ion-social-usd”></i>
<i class=”icon ion-social-usd-outline”></i>
<i class=”icon ion-social-bitcoin”></i>
<i class=”icon ion-social-bitcoin-outline”></i>
<i class=”icon ion-social-yen”></i>
<i class=”icon ion-social-yen-outline”></i>
<i class=”icon ion-social-euro”></i>
<i class=”icon ion-social-euro-outline”></i>

berikut contoh cara menggunakan icon pada ionic ini :

Icon Pada Ionic

icon pada tab menu



Untuk menggunakan ion pada tab menu ini kita tinggal memanggil class icon, misalnya kita menggunakan icon ion-home.

oke, sekian dulu pembahasan tentang icon pada ionic. ingat ionic memang menyediakan icon defaultnya, akan tetapi kita juga bisa menggunakan icon sendiri.

oke, saya rasa sekian dulu materi tentang icon, saya mohon maaf karena gambar icon pada tabel belum bisa di tampilkan (maklum sedang dalam pengembangan) heheh

Terima Kasih.

Incoming search terms:

  • malasngoding ionic
  • buku ionic
  • panduan ionic baha
  • ionic malasngoding
  • full tutorial ionic indo
  • ebook ionic bahasa indonesia
  • download ionic mysql ebook tutorial
  • buku pemula ionic
  • buku ionic 3
  • tutorial ionic bahasa pdf indonesia




About the author
Muzanni

Love Mobile Development


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]