آموزش آیکون ها در برنامه نویسی آیونیک
4 سال پیش
آموزش آیکون ها در برنامه نویسی آیونیک
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش آیکون ها در برنامه نویسی آیونیک خواهیم پرداخت.
بیش از 700 آیکون برتر توسط Ionic ارائه شده است. همچنین مجموعه های مختلفی از آیکون ها برای Android و IOS ارائه شده است. در صورت عدم تمایل می توانید تقریباً هر آنچه را که نیاز دارید پیدا کنید اما مجبور نیستید از آنها استفاده کنید. به جای آن می توانید از آیکون های دلخواه خود یا هر مجموعه آیکون دیگری استفاده کنید می توانید تمام آیکون های Ionic را در اینجا بررسی کنید.
چگونه از آیکون ها استفاده کنیم؟
اگر می خواهید از آیکون های Ionic استفاده کنید ، نماد مورد نیاز خود را در صفحه پیدا کنید (https://ionicons.com/). وقتی عناصر آیونیک را اضافه می کنید، همیشه ابتدا کلاس اصلی را اضافه می کنید و سپس زیر کلاس مورد نظر خود را اضافه می کنید. کلاس اصلی برای همه آیکون ها icon است. Subclass نام آیکونی است که می خواهید. ما شش آیکون را در مثال خود اضافه می کنیم که در زیر آورده شده است –
|
1 2 3 4 5 6 |
<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> |
کد فوق صفحه زیر را تولید می کند –
اندازه این آیکون ها را می توان با ویژگی font-size موجود در فایل Ionic CSS تغییر داد.
|
1 2 3 |
.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> |
آیکون های اندروید
| کد | نتیجه |
|---|---|
| <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> |
آیکون های اجتماعی
| کد | نتیجه |
|---|---|
| <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> |
لیست جلسات قبل آموزش برنامه نویسی آیونیک
- آموزش برنامه نویسی آیونیک
- نگاهی کلی به آموزش برنامه نویسی آیونیک
- آموزش تنظیمات محیطی در برنامه نویسی آیونیک
- آموزش رنگ ها در برنامه نویسی آیونیک
- آموزش ایجاد محتوا در برنامه نویسی آیونیک
- آموزش هدر در برنامه نویسی آیونیک
- آموزش فوتر در برنامه نویسی آیونیک
- آموزش دکمه ها در برنامه نویسی آیونیک
- آموزش لیست ها در برنامه نویسی آیونیک
- آموزش کارت ها در برنامه نویسی آیونیک
- آموزش فرم ها در برنامه نویسی آیونیک
- آموزش Toggle در برنامه نویسی آیونیک
- آموزش چک باکس در برنامه نویسی آیونیک
- آموزش دکمه های رادیویی در برنامه نویسی آیونیک
- آموزش محدوده در برنامه نویسی آیونیک
- آموزش Select در برنامه نویسی آیونیک
- آموزش زبانه ها در برنامه نویسی آیونیک
- آموزش شبکه در برنامه نویسی آیونیک
نویسنده مطلب
saber
.svg)
دیدگاه شما