Ionic - Icônes
Il y a plus que 700 premium iconsfourni par Ionic. Il existe également différents ensembles d'icônes fournis pour Android et IOS. Vous pouvez trouver presque tout ce dont vous avez besoin, mais vous n'êtes pas obligé de les utiliser, si vous ne le souhaitez pas. Vous pouvez utiliser vos propres icônes personnalisées ou tout autre jeu d'icônes à la place. Vous pouvez vérifier toutes les icônes Ionic ici .
Comment utiliser les icônes?
Si vous souhaitez utiliser des icônes ioniques, recherchez l'icône dont vous avez besoin sur la pagehttps://ionicons.com/). Lorsque vous ajoutez des éléments Ionic, vous ajoutez toujours la classe principale en premier, puis vous ajoutez la sous-classe souhaitée. La classe principale de toutes les icônes esticon. La sous-classe est le nom de l'icône souhaitée. Nous ajouterons six icônes dans notre exemple qui est donné ci-dessous -
<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>Le code ci-dessus produira l'écran suivant -
La taille de ces icônes peut être modifiée avec le font-size propriété dans votre fichier CSS Ionic.
.icon {
font-size: 50px;
}Une fois la taille de l'icône configurée, le même code produira la capture d'écran suivante comme sortie -
Icônes par défaut
| Code | Résultat |
|---|---|
| <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-cercled"> </i> | |
| <i class = "icon ion-plus-round"> </i> | |
| <i class = "icon ion-plus"> </i> | |
| <i class = "icon ion-plus-cercled"> </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-cercled"> </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-fill"> </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-deposit"> </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-plane"> </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-lock"> </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-loading"> </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-parapluie"> </i> | |
| <i class = "icon ion-nucleaire"> </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> |
Icônes de style iOS
| Code | Résultat |
|---|---|
| <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-browser"> </i> | |
| <i class = "icon ion-ios-browser-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-deposit"> </i> | |
| <i class = "icon ion-ios-deposit-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-lock"> </i> | |
| <i class = "icon ion-ios-lock-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 & gtgt; | |
| <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-partialsunny"> </i> | |
| <i class = "icon ion-ios-partialsunny-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> |
Icônes de style Android
| Code | Résultat |
|---|---|
| <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-naviguer"> </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-bicyclette"> </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-textms"> </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> |
Social Icons
| Code | Result |
|---|---|
| <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> |