ylbtech-ionic-CSS:ionic icon(图标)
1.返回顶部
1、

ionic icon(图标)

ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 iOS 有不同的样式。

Ionic icons 官网: http://ionicons.com/

国内图标样式 CDN 地址:https://cdn.bootcss.com/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>

尝试一下 »

我们可以通过 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>  
 
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

ionic-CSS:ionic icon(图标)的更多相关文章

  1. Ionic Css样式详解

    Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...

  2. 认识CSS中标题引入icon图标

    前端之HTML,CSS(十一) icon图标 icon图标的使用 获取网站的中标题icon图标,以京东为例:在域名后添加/favicon.ico Enter打开 鼠标右键,图标另存为下载icon图标, ...

  3. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  4. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  5. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  6. Ext.Net TreePanel 修改Icon图标

    分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...

  7. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  8. Easyui 修改|新增jquery-easyui icon图标

    修改|新增jquery-easyui icon图标 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 修改配置文件 打开jquery-easyui-1.5.3\ ...

  9. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

随机推荐

  1. RMQ区间求最值

    RMQ用于区间快速查找最值,适用于期间数值无更改的情况.其预处理的复杂度为O(nlogn),查询的时间复杂度为O(1),对比于线段树的预处理O(nlogn),查询O(logn)来说,在某些情况下有着其 ...

  2. android API版本对应的系统版本及Android获取手机和系统版本等信息的代码

    学了这么久的Android,竟然一直对其API对应的名称关系一值搞不清楚,现在网上认真看了下资料,转载一个觉得写得不错的作者的文章,记下来: [背景] 之前折腾android期间,慢慢地知道了,And ...

  3. sea.js模块加载工具

    seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...

  4. 2019杭电多校第三场hdu6608 Fansblog(威尔逊定理)

    Fansblog 题目传送门 解题思路 Q! % P = (P-1)!/(P-1)...(Q-1) % P. 因为P是质数,根据威尔逊定理,(P-1)!%P=P-1.所以答案就是(P-1)((P-1) ...

  5. 2018 ECNA Regional Contest J. Watch Where You Step

    题目链接:Watch Where You Step 题意 给定有向图的邻接矩阵,现在需要给该图增加边,使得如果两点可达必直接可达,求需要加边的数量. 题解 首先,如果给定 \(n\) 个结点的图中任意 ...

  6. 2019河北省大学生程序设计竞赛(重现赛)B 题 -Icebound and Sequence ( 等比数列求和的快速幂取模)

    题目链接:https://ac.nowcoder.com/acm/contest/903/B 题意: 给你 q,n,p,求 q1+q2+...+qn 的和 模 p. 思路:一开始不会做,后面查了下发现 ...

  7. 并发编程(二)——利用Process类开启进程、僵尸进程、孤儿进程、守护进程、互斥锁、队列与管道

    Process类与开启进程.守护进程.互斥锁 一.multiprocessing模块 1.multiprocessing模块用来开启子进程,并在子进程中执行我们定制的任务(比如函数),该模块与多线程模 ...

  8. Es6中let与const的区别:(神奇的块级作用域)

    所谓的块级作用域:形成一个暂时性的死区:{    } 一.共同点: a:都是用来声明变量: b:都能形成一个块级作用域: c:都只能在声明变量的块级作用域里面有效: 二.不同点: 1.let: a:在 ...

  9. 借用数组对象的prototype给数组扩充降维方法

    原理:只要是一个对象,他都有一个prototype原型对象,保存共有的属性和方法. <!DOCTYPE html> <html lang="en"> < ...

  10. tf.matmul() 和tf.multiply() 的区别

    1.tf.multiply()两个矩阵中对应元素各自相乘 格式: tf.multiply(x, y, name=None) 参数: x: 一个类型为:half, float32, float64, u ...