ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。
Ionic icons 官网: http://ionicons.com/
国内图标样式 CDN 地址：https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css。
用法也非常的简单，由一个 icon 类及指定图标类组成，如：
<i class="icon ion-star"></i>
<i class = "icon ion-happy-outline"></i>
<i class = "icon ion-ios-analytics"></i>
<i class = "icon ion-ios-eye"></i>演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程(web176.com)</title> <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css"> </head> <body> <i class="icon ion-star"></i> <i class = "icon ion-happy-outline"></i> <i class = "icon ion-ios-analytics"></i> <i class = "icon ion-ios-eye"></i> </body> </html>
我们可以通过 font-size 来设置图片的大小：
.icon {
font-size: 50px;
}默认图标按钮：
| 代码 | 图标 |
|---|---|
| <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> |
iOS 风格图标：
| 代码 | 图标 |
|---|---|
| <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> |
Android 风格图标：
| Code | Result |
|---|---|
| <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> |
作者：冒牌SEO，如若转载，请注明出处：https://www.web176.com/ionic/9938.html
支付宝 
微信 