CSS код и примеры использования этого шрифта-иконок «Ionicons». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:"") и результат.
Узнайте также о CSS3 с примерами.
Шрифты-иконки Ionicons
@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.eot?v=2.0.0");src:url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"),url("../fonts/ionicons.woff?v=2.0.0") format("woff"),url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");font-weight:normal;font-style:normal}
[class^="ion-"]:before,[class*=" ion-"]:before{display:inline-block;font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
Например, Вы можете добавить такие классы на странцу или сайт, а потом их легко использовать в HTML конструкциях
.fa-star-o:before{content:"\f006";}
Как использовать шрифты-иконки?
Например, Вы можете использовать импорт CSS кода. Скачайте и разместите у себя на сервере файлы шрифта. Затем подключите их в любой из подключенных к нужной странице CSS файл. Код подключения доступен выше. После этого, Вы сможете писать следующий код, например:
<div class="one"><i class="ion-a-download"></i> Скачать файл</div>
Получится:
Скачать файл
Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО. Если Вы не хотите подгружать весь CSS код, то можете использовать лишь импорт шрифта и создавать свои классы.
Обратите внимание, что код был сокращен за счет использования
[class^="ion-"]:before, [class*=" ion-"]:before {display:inline-block; font-family:"Ionicons"; speak:none; font-style:normal;font-weight:normal; font-variant:normal; text-transform:none; text-rendering:auto; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
, вместо стандартного перечисления всех классов и убрано слово android – заменено на a. Это все, что редактировано нами из стандартной сборки.
CSS:
@charset "UTF-8";@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.eot?v=2.0.0");src:url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"),url("../fonts/ionicons.woff?v=2.0.0") format("woff"),url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");font-weight:normal;font-style:normal}
[class^="ion-"]:before,[class*=" ion-"]:before{display:inline-block;font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ion-alert:before{content:"\f101"}
.ion-alert-circled:before{content:"\f100"}
.ion-a-add:before{content:"\f2c7"}
.ion-a-add-circle:before{content:"\f359"}
.ion-a-alarm-clock:before{content:"\f35a"}
.ion-a-alert:before{content:"\f35b"}
.ion-a-apps:before{content:"\f35c"}
.ion-a-archive:before{content:"\f2c9"}
.ion-a-arrow-back:before{content:"\f2ca"}
.ion-a-arrow-down:before{content:"\f35d"}
.ion-a-arrow-dropdown:before{content:"\f35f"}
.ion-a-arrow-dropdown-circle:before{content:"\f35e"}
.ion-a-arrow-dropleft:before{content:"\f361"}
.ion-a-arrow-dropleft-circle:before{content:"\f360"}
.ion-a-arrow-dropright:before{content:"\f363"}
.ion-a-arrow-dropright-circle:before{content:"\f362"}
.ion-a-arrow-dropup:before{content:"\f365"}
.ion-a-arrow-dropup-circle:before{content:"\f364"}
.ion-a-arrow-forward:before{content:"\f30f"}
.ion-a-arrow-up:before{content:"\f366"}
.ion-a-attach:before{content:"\f367"}
.ion-a-bar:before{content:"\f368"}
.ion-a-bicycle:before{content:"\f369"}
.ion-a-boat:before{content:"\f36a"}
.ion-a-bookmark:before{content:"\f36b"}
.ion-a-bulb:before{content:"\f36c"}
.ion-a-bus:before{content:"\f36d"}
.ion-a-calendar:before{content:"\f2d1"}
.ion-a-call:before{content:"\f2d2"}
.ion-a-camera:before{content:"\f2d3"}
.ion-a-cancel:before{content:"\f36e"}
.ion-a-car:before{content:"\f36f"}
.ion-a-cart:before{content:"\f370"}
.ion-a-chat:before{content:"\f2d4"}
.ion-a-checkbox:before{content:"\f374"}
.ion-a-checkbox-blank:before{content:"\f371"}
.ion-a-checkbox-outline:before{content:"\f373"}
.ion-a-checkbox-outline-blank:before{content:"\f372"}
.ion-a-checkmark-circle:before{content:"\f375"}
.ion-a-clipboard:before{content:"\f376"}
.ion-a-close:before{content:"\f2d7"}
.ion-a-cloud:before{content:"\f37a"}
.ion-a-cloud-circle:before{content:"\f377"}
.ion-a-cloud-done:before{content:"\f378"}
.ion-a-cloud-outline:before{content:"\f379"}
.ion-a-color-palette:before{content:"\f37b"}
.ion-a-compass:before{content:"\f37c"}
.ion-a-contact:before{content:"\f2d8"}
.ion-a-contacts:before{content:"\f2d9"}
.ion-a-contract:before{content:"\f37d"}
.ion-a-create:before{content:"\f37e"}
.ion-a-delete:before{content:"\f37f"}
.ion-a-desktop:before{content:"\f380"}
.ion-a-document:before{content:"\f381"}
.ion-a-done:before{content:"\f383"}
.ion-a-done-all:before{content:"\f382"}
.ion-a-download:before{content:"\f2dd"}
.ion-a-drafts:before{content:"\f384"}
.ion-a-exit:before{content:"\f385"}
.ion-a-expand:before{content:"\f386"}
.ion-a-favorite:before{content:"\f388"}
.ion-a-favorite-outline:before{content:"\f387"}
.ion-a-film:before{content:"\f389"}
.ion-a-folder:before{content:"\f2e0"}
.ion-a-folder-open:before{content:"\f38a"}
.ion-a-funnel:before{content:"\f38b"}
.ion-a-globe:before{content:"\f38c"}
.ion-a-hand:before{content:"\f2e3"}
.ion-a-hangout:before{content:"\f38d"}
.ion-a-happy:before{content:"\f38e"}
.ion-a-home:before{content:"\f38f"}
.ion-a-image:before{content:"\f2e4"}
.ion-a-laptop:before{content:"\f390"}
.ion-a-list:before{content:"\f391"}
.ion-a-locate:before{content:"\f2e9"}
.ion-a-lock:before{content:"\f392"}
.ion-a-mail:before{content:"\f2eb"}
.ion-a-map:before{content:"\f393"}
.ion-a-menu:before{content:"\f394"}
.ion-a-microphone:before{content:"\f2ec"}
.ion-a-microphone-off:before{content:"\f395"}
.ion-a-more-horizontal:before{content:"\f396"}
.ion-a-more-vertical:before{content:"\f397"}
.ion-a-navigate:before{content:"\f398"}
.ion-a-notifications:before{content:"\f39b"}
.ion-a-notifications-none:before{content:"\f399"}
.ion-a-notifications-off:before{content:"\f39a"}
.ion-a-open:before{content:"\f39c"}
.ion-a-options:before{content:"\f39d"}
.ion-a-people:before{content:"\f39e"}
.ion-a-person:before{content:"\f3a0"}
.ion-a-person-add:before{content:"\f39f"}
.ion-a-phone-landscape:before{content:"\f3a1"}
.ion-a-phone-portrait:before{content:"\f3a2"}
.ion-a-pin:before{content:"\f3a3"}
.ion-a-plane:before{content:"\f3a4"}
.ion-a-playstore:before{content:"\f2f0"}
.ion-a-print:before{content:"\f3a5"}
.ion-a-radio-button-off:before{content:"\f3a6"}
.ion-a-radio-button-on:before{content:"\f3a7"}
.ion-a-refresh:before{content:"\f3a8"}
.ion-a-remove:before{content:"\f2f4"}
.ion-a-remove-circle:before{content:"\f3a9"}
.ion-a-restaurant:before{content:"\f3aa"}
.ion-a-sad:before{content:"\f3ab"}
.ion-a-search:before{content:"\f2f5"}
.ion-a-send:before{content:"\f2f6"}
.ion-a-settings:before{content:"\f2f7"}
.ion-a-share:before{content:"\f2f8"}
.ion-a-share-alt:before{content:"\f3ac"}
.ion-a-star:before{content:"\f2fc"}
.ion-a-star-half:before{content:"\f3ad"}
.ion-a-star-outline:before{content:"\f3ae"}
.ion-a-stopwatch:before{content:"\f2fd"}
.ion-a-subway:before{content:"\f3af"}
.ion-a-sunny:before{content:"\f3b0"}
.ion-a-sync:before{content:"\f3b1"}
.ion-a-textsms:before{content:"\f3b2"}
.ion-a-time:before{content:"\f3b3"}
.ion-a-train:before{content:"\f3b4"}
.ion-a-unlock:before{content:"\f3b5"}
.ion-a-upload:before{content:"\f3b6"}
.ion-a-volume-down:before{content:"\f3b7"}
.ion-a-volume-mute:before{content:"\f3b8"}
.ion-a-volume-off:before{content:"\f3b9"}
.ion-a-volume-up:before{content:"\f3ba"}
.ion-a-walk:before{content:"\f3bb"}
.ion-a-warning:before{content:"\f3bc"}
.ion-a-watch:before{content:"\f3bd"}
.ion-a-wifi:before{content:"\f305"}
.ion-aperture:before{content:"\f313"}
.ion-archive:before{content:"\f102"}
.ion-arrow-down-a:before{content:"\f103"}
.ion-arrow-down-b:before{content:"\f104"}
.ion-arrow-down-c:before{content:"\f105"}
.ion-arrow-expand:before{content:"\f25e"}
.ion-arrow-graph-down-left:before{content:"\f25f"}
.ion-arrow-graph-down-right:before{content:"\f260"}
.ion-arrow-graph-up-left:before{content:"\f261"}
.ion-arrow-graph-up-right:before{content:"\f262"}
.ion-arrow-left-a:before{content:"\f106"}
.ion-arrow-left-b:before{content:"\f107"}
.ion-arrow-left-c:before{content:"\f108"}
.ion-arrow-move:before{content:"\f263"}
.ion-arrow-resize:before{content:"\f264"}
.ion-arrow-return-left:before{content:"\f265"}
.ion-arrow-return-right:before{content:"\f266"}
.ion-arrow-right-a:before{content:"\f109"}
.ion-arrow-right-b:before{content:"\f10a"}
.ion-arrow-right-c:before{content:"\f10b"}
.ion-arrow-shrink:before{content:"\f267"}
.ion-arrow-swap:before{content:"\f268"}
.ion-arrow-up-a:before{content:"\f10c"}
.ion-arrow-up-b:before{content:"\f10d"}
.ion-arrow-up-c:before{content:"\f10e"}
.ion-asterisk:before{content:"\f314"}
.ion-at:before{content:"\f10f"}
.ion-backspace:before{content:"\f3bf"}
.ion-backspace-outline:before{content:"\f3be"}
.ion-bag:before{content:"\f110"}
.ion-battery-charging:before{content:"\f111"}
.ion-battery-empty:before{content:"\f112"}
.ion-battery-full:before{content:"\f113"}
.ion-battery-half:before{content:"\f114"}
.ion-battery-low:before{content:"\f115"}
.ion-beaker:before{content:"\f269"}
.ion-beer:before{content:"\f26a"}
.ion-bluetooth:before{content:"\f116"}
.ion-bonfire:before{content:"\f315"}
.ion-bookmark:before{content:"\f26b"}
.ion-bowtie:before{content:"\f3c0"}
.ion-briefcase:before{content:"\f26c"}
.ion-bug:before{content:"\f2be"}
.ion-calculator:before{content:"\f26d"}
.ion-calendar:before{content:"\f117"}
.ion-camera:before{content:"\f118"}
.ion-card:before{content:"\f119"}
.ion-cash:before{content:"\f316"}
.ion-chatbox:before{content:"\f11b"}
.ion-chatbox-working:before{content:"\f11a"}
.ion-chatboxes:before{content:"\f11c"}
.ion-chatbubble:before{content:"\f11e"}
.ion-chatbubble-working:before{content:"\f11d"}
.ion-chatbubbles:before{content:"\f11f"}
.ion-checkmark:before{content:"\f122"}
.ion-checkmark-circled:before{content:"\f120"}
.ion-checkmark-round:before{content:"\f121"}
.ion-chevron-down:before{content:"\f123"}
.ion-chevron-left:before{content:"\f124"}
.ion-chevron-right:before{content:"\f125"}
.ion-chevron-up:before{content:"\f126"}
.ion-clipboard:before{content:"\f127"}
.ion-clock:before{content:"\f26e"}
.ion-close:before{content:"\f12a"}
.ion-close-circled:before{content:"\f128"}
.ion-close-round:before{content:"\f129"}
.ion-closed-captioning:before{content:"\f317"}
.ion-cloud:before{content:"\f12b"}
.ion-code:before{content:"\f271"}
.ion-code-download:before{content:"\f26f"}
.ion-code-working:before{content:"\f270"}
.ion-coffee:before{content:"\f272"}
.ion-compass:before{content:"\f273"}
.ion-compose:before{content:"\f12c"}
.ion-connection-bars:before{content:"\f274"}
.ion-contrast:before{content:"\f275"}
.ion-crop:before{content:"\f3c1"}
.ion-cube:before{content:"\f318"}
.ion-disc:before{content:"\f12d"}
.ion-document:before{content:"\f12f"}
.ion-document-text:before{content:"\f12e"}
.ion-drag:before{content:"\f130"}
.ion-earth:before{content:"\f276"}
.ion-easel:before{content:"\f3c2"}
.ion-edit:before{content:"\f2bf"}
.ion-egg:before{content:"\f277"}
.ion-eject:before{content:"\f131"}
.ion-email:before{content:"\f132"}
.ion-email-unread:before{content:"\f3c3"}
.ion-erlenmeyer-flask:before{content:"\f3c5"}
.ion-erlenmeyer-flask-bubbles:before{content:"\f3c4"}
.ion-eye:before{content:"\f133"}
.ion-eye-disabled:before{content:"\f306"}
.ion-female:before{content:"\f278"}
.ion-filing:before{content:"\f134"}
.ion-film-marker:before{content:"\f135"}
.ion-fireball:before{content:"\f319"}
.ion-flag:before{content:"\f279"}
.ion-flame:before{content:"\f31a"}
.ion-flash:before{content:"\f137"}
.ion-flash-off:before{content:"\f136"}
.ion-folder:before{content:"\f139"}
.ion-fork:before{content:"\f27a"}
.ion-fork-repo:before{content:"\f2c0"}
.ion-forward:before{content:"\f13a"}
.ion-funnel:before{content:"\f31b"}
.ion-gear-a:before{content:"\f13d"}
.ion-gear-b:before{content:"\f13e"}
.ion-grid:before{content:"\f13f"}
.ion-hammer:before{content:"\f27b"}
.ion-happy:before{content:"\f31c"}
.ion-happy-outline:before{content:"\f3c6"}
.ion-headphone:before{content:"\f140"}
.ion-heart:before{content:"\f141"}
.ion-heart-broken:before{content:"\f31d"}
.ion-help:before{content:"\f143"}
.ion-help-buoy:before{content:"\f27c"}
.ion-help-circled:before{content:"\f142"}
.ion-home:before{content:"\f144"}
.ion-icecream:before{content:"\f27d"}
.ion-image:before{content:"\f147"}
.ion-images:before{content:"\f148"}
.ion-information:before{content:"\f14a"}
.ion-information-circled:before{content:"\f149"}
.ion-ionic:before{content:"\f14b"}
.ion-ios-alarm:before{content:"\f3c8"}
.ion-ios-alarm-outline:before{content:"\f3c7"}
.ion-ios-albums:before{content:"\f3ca"}
.ion-ios-albums-outline:before{content:"\f3c9"}
.ion-ios-americanfootball:before{content:"\f3cc"}
.ion-ios-americanfootball-outline:before{content:"\f3cb"}
.ion-ios-analytics:before{content:"\f3ce"}
.ion-ios-analytics-outline:before{content:"\f3cd"}
.ion-ios-arrow-back:before{content:"\f3cf"}
.ion-ios-arrow-down:before{content:"\f3d0"}
.ion-ios-arrow-forward:before{content:"\f3d1"}
.ion-ios-arrow-left:before{content:"\f3d2"}
.ion-ios-arrow-right:before{content:"\f3d3"}
.ion-ios-arrow-thin-down:before{content:"\f3d4"}
.ion-ios-arrow-thin-left:before{content:"\f3d5"}
.ion-ios-arrow-thin-right:before{content:"\f3d6"}
.ion-ios-arrow-thin-up:before{content:"\f3d7"}
.ion-ios-arrow-up:before{content:"\f3d8"}
.ion-ios-at:before{content:"\f3da"}
.ion-ios-at-outline:before{content:"\f3d9"}
.ion-ios-barcode:before{content:"\f3dc"}
.ion-ios-barcode-outline:before{content:"\f3db"}
.ion-ios-baseball:before{content:"\f3de"}
.ion-ios-baseball-outline:before{content:"\f3dd"}
.ion-ios-basketball:before{content:"\f3e0"}
.ion-ios-basketball-outline:before{content:"\f3df"}
.ion-ios-bell:before{content:"\f3e2"}
.ion-ios-bell-outline:before{content:"\f3e1"}
.ion-ios-body:before{content:"\f3e4"}
.ion-ios-body-outline:before{content:"\f3e3"}
.ion-ios-bolt:before{content:"\f3e6"}
.ion-ios-bolt-outline:before{content:"\f3e5"}
.ion-ios-book:before{content:"\f3e8"}
.ion-ios-book-outline:before{content:"\f3e7"}
.ion-ios-bookmarks:before{content:"\f3ea"}
.ion-ios-bookmarks-outline:before{content:"\f3e9"}
.ion-ios-box:before{content:"\f3ec"}
.ion-ios-box-outline:before{content:"\f3eb"}
.ion-ios-briefcase:before{content:"\f3ee"}
.ion-ios-briefcase-outline:before{content:"\f3ed"}
.ion-ios-browsers:before{content:"\f3f0"}
.ion-ios-browsers-outline:before{content:"\f3ef"}
.ion-ios-calculator:before{content:"\f3f2"}
.ion-ios-calculator-outline:before{content:"\f3f1"}
.ion-ios-calendar:before{content:"\f3f4"}
.ion-ios-calendar-outline:before{content:"\f3f3"}
.ion-ios-camera:before{content:"\f3f6"}
.ion-ios-camera-outline:before{content:"\f3f5"}
.ion-ios-cart:before{content:"\f3f8"}
.ion-ios-cart-outline:before{content:"\f3f7"}
.ion-ios-chatboxes:before{content:"\f3fa"}
.ion-ios-chatboxes-outline:before{content:"\f3f9"}
.ion-ios-chatbubble:before{content:"\f3fc"}
.ion-ios-chatbubble-outline:before{content:"\f3fb"}
.ion-ios-checkmark:before{content:"\f3ff"}
.ion-ios-checkmark-empty:before{content:"\f3fd"}
.ion-ios-checkmark-outline:before{content:"\f3fe"}
.ion-ios-circle-filled:before{content:"\f400"}
.ion-ios-circle-outline:before{content:"\f401"}
.ion-ios-clock:before{content:"\f403"}
.ion-ios-clock-outline:before{content:"\f402"}
.ion-ios-close:before{content:"\f406"}
.ion-ios-close-empty:before{content:"\f404"}
.ion-ios-close-outline:before{content:"\f405"}
.ion-ios-cloud:before{content:"\f40c"}
.ion-ios-cloud-download:before{content:"\f408"}
.ion-ios-cloud-download-outline:before{content:"\f407"}
.ion-ios-cloud-outline:before{content:"\f409"}
.ion-ios-cloud-upload:before{content:"\f40b"}
.ion-ios-cloud-upload-outline:before{content:"\f40a"}
.ion-ios-cloudy:before{content:"\f410"}
.ion-ios-cloudy-night:before{content:"\f40e"}
.ion-ios-cloudy-night-outline:before{content:"\f40d"}
.ion-ios-cloudy-outline:before{content:"\f40f"}
.ion-ios-cog:before{content:"\f412"}
.ion-ios-cog-outline:before{content:"\f411"}
.ion-ios-color-filter:before{content:"\f414"}
.ion-ios-color-filter-outline:before{content:"\f413"}
.ion-ios-color-wand:before{content:"\f416"}
.ion-ios-color-wand-outline:before{content:"\f415"}
.ion-ios-compose:before{content:"\f418"}
.ion-ios-compose-outline:before{content:"\f417"}
.ion-ios-contact:before{content:"\f41a"}
.ion-ios-contact-outline:before{content:"\f419"}
.ion-ios-copy:before{content:"\f41c"}
.ion-ios-copy-outline:before{content:"\f41b"}
.ion-ios-crop:before{content:"\f41e"}
.ion-ios-crop-strong:before{content:"\f41d"}
.ion-ios-download:before{content:"\f420"}
.ion-ios-download-outline:before{content:"\f41f"}
.ion-ios-drag:before{content:"\f421"}
.ion-ios-email:before{content:"\f423"}
.ion-ios-email-outline:before{content:"\f422"}
.ion-ios-eye:before{content:"\f425"}
.ion-ios-eye-outline:before{content:"\f424"}
.ion-ios-fastforward:before{content:"\f427"}
.ion-ios-fastforward-outline:before{content:"\f426"}
.ion-ios-filing:before{content:"\f429"}
.ion-ios-filing-outline:before{content:"\f428"}
.ion-ios-film:before{content:"\f42b"}
.ion-ios-film-outline:before{content:"\f42a"}
.ion-ios-flag:before{content:"\f42d"}
.ion-ios-flag-outline:before{content:"\f42c"}
.ion-ios-flame:before{content:"\f42f"}
.ion-ios-flame-outline:before{content:"\f42e"}
.ion-ios-flask:before{content:"\f431"}
.ion-ios-flask-outline:before{content:"\f430"}
.ion-ios-flower:before{content:"\f433"}
.ion-ios-flower-outline:before{content:"\f432"}
.ion-ios-folder:before{content:"\f435"}
.ion-ios-folder-outline:before{content:"\f434"}
.ion-ios-football:before{content:"\f437"}
.ion-ios-football-outline:before{content:"\f436"}
.ion-ios-game-controller-a:before{content:"\f439"}
.ion-ios-game-controller-a-outline:before{content:"\f438"}
.ion-ios-game-controller-b:before{content:"\f43b"}
.ion-ios-game-controller-b-outline:before{content:"\f43a"}
.ion-ios-gear:before{content:"\f43d"}
.ion-ios-gear-outline:before{content:"\f43c"}
.ion-ios-glasses:before{content:"\f43f"}
.ion-ios-glasses-outline:before{content:"\f43e"}
.ion-ios-grid-view:before{content:"\f441"}
.ion-ios-grid-view-outline:before{content:"\f440"}
.ion-ios-heart:before{content:"\f443"}
.ion-ios-heart-outline:before{content:"\f442"}
.ion-ios-help:before{content:"\f446"}
.ion-ios-help-empty:before{content:"\f444"}
.ion-ios-help-outline:before{content:"\f445"}
.ion-ios-home:before{content:"\f448"}
.ion-ios-home-outline:before{content:"\f447"}
.ion-ios-infinite:before{content:"\f44a"}
.ion-ios-infinite-outline:before{content:"\f449"}
.ion-ios-information:before{content:"\f44d"}
.ion-ios-information-empty:before{content:"\f44b"}
.ion-ios-information-outline:before{content:"\f44c"}
.ion-ios-ionic-outline:before{content:"\f44e"}
.ion-ios-keypad:before{content:"\f450"}
.ion-ios-keypad-outline:before{content:"\f44f"}
.ion-ios-lightbulb:before{content:"\f452"}
.ion-ios-lightbulb-outline:before{content:"\f451"}
.ion-ios-list:before{content:"\f454"}
.ion-ios-list-outline:before{content:"\f453"}
.ion-ios-location:before{content:"\f456"}
.ion-ios-location-outline:before{content:"\f455"}
.ion-ios-locked:before{content:"\f458"}
.ion-ios-locked-outline:before{content:"\f457"}
.ion-ios-loop:before{content:"\f45a"}
.ion-ios-loop-strong:before{content:"\f459"}
.ion-ios-medical:before{content:"\f45c"}
.ion-ios-medical-outline:before{content:"\f45b"}
.ion-ios-medkit:before{content:"\f45e"}
.ion-ios-medkit-outline:before{content:"\f45d"}
.ion-ios-mic:before{content:"\f461"}
.ion-ios-mic-off:before{content:"\f45f"}
.ion-ios-mic-outline:before{content:"\f460"}
.ion-ios-minus:before{content:"\f464"}
.ion-ios-minus-empty:before{content:"\f462"}
.ion-ios-minus-outline:before{content:"\f463"}
.ion-ios-monitor:before{content:"\f466"}
.ion-ios-monitor-outline:before{content:"\f465"}
.ion-ios-moon:before{content:"\f468"}
.ion-ios-moon-outline:before{content:"\f467"}
.ion-ios-more:before{content:"\f46a"}
.ion-ios-more-outline:before{content:"\f469"}
.ion-ios-musical-note:before{content:"\f46b"}
.ion-ios-musical-notes:before{content:"\f46c"}
.ion-ios-navigate:before{content:"\f46e"}
.ion-ios-navigate-outline:before{content:"\f46d"}
.ion-ios-nutrition:before{content:"\f470"}
.ion-ios-nutrition-outline:before{content:"\f46f"}
.ion-ios-paper:before{content:"\f472"}
.ion-ios-paper-outline:before{content:"\f471"}
.ion-ios-paperplane:before{content:"\f474"}
.ion-ios-paperplane-outline:before{content:"\f473"}
.ion-ios-partlysunny:before{content:"\f476"}
.ion-ios-partlysunny-outline:before{content:"\f475"}
.ion-ios-pause:before{content:"\f478"}
.ion-ios-pause-outline:before{content:"\f477"}
.ion-ios-paw:before{content:"\f47a"}
.ion-ios-paw-outline:before{content:"\f479"}
.ion-ios-people:before{content:"\f47c"}
.ion-ios-people-outline:before{content:"\f47b"}
.ion-ios-person:before{content:"\f47e"}
.ion-ios-person-outline:before{content:"\f47d"}
.ion-ios-personadd:before{content:"\f480"}
.ion-ios-personadd-outline:before{content:"\f47f"}
.ion-ios-photos:before{content:"\f482"}
.ion-ios-photos-outline:before{content:"\f481"}
.ion-ios-pie:before{content:"\f484"}
.ion-ios-pie-outline:before{content:"\f483"}
.ion-ios-pint:before{content:"\f486"}
.ion-ios-pint-outline:before{content:"\f485"}
.ion-ios-play:before{content:"\f488"}
.ion-ios-play-outline:before{content:"\f487"}
.ion-ios-plus:before{content:"\f48b"}
.ion-ios-plus-empty:before{content:"\f489"}
.ion-ios-plus-outline:before{content:"\f48a"}
.ion-ios-pricetag:before{content:"\f48d"}
.ion-ios-pricetag-outline:before{content:"\f48c"}
.ion-ios-pricetags:before{content:"\f48f"}
.ion-ios-pricetags-outline:before{content:"\f48e"}
.ion-ios-printer:before{content:"\f491"}
.ion-ios-printer-outline:before{content:"\f490"}
.ion-ios-pulse:before{content:"\f493"}
.ion-ios-pulse-strong:before{content:"\f492"}
.ion-ios-rainy:before{content:"\f495"}
.ion-ios-rainy-outline:before{content:"\f494"}
.ion-ios-recording:before{content:"\f497"}
.ion-ios-recording-outline:before{content:"\f496"}
.ion-ios-redo:before{content:"\f499"}
.ion-ios-redo-outline:before{content:"\f498"}
.ion-ios-refresh:before{content:"\f49c"}
.ion-ios-refresh-empty:before{content:"\f49a"}
.ion-ios-refresh-outline:before{content:"\f49b"}
.ion-ios-reload:before{content:"\f49d"}
.ion-ios-reverse-camera:before{content:"\f49f"}
.ion-ios-reverse-camera-outline:before{content:"\f49e"}
.ion-ios-rewind:before{content:"\f4a1"}
.ion-ios-rewind-outline:before{content:"\f4a0"}
.ion-ios-rose:before{content:"\f4a3"}
.ion-ios-rose-outline:before{content:"\f4a2"}
.ion-ios-search:before{content:"\f4a5"}
.ion-ios-search-strong:before{content:"\f4a4"}
.ion-ios-settings:before{content:"\f4a7"}
.ion-ios-settings-strong:before{content:"\f4a6"}
.ion-ios-shuffle:before{content:"\f4a9"}
.ion-ios-shuffle-strong:before{content:"\f4a8"}
.ion-ios-skipbackward:before{content:"\f4ab"}
.ion-ios-skipbackward-outline:before{content:"\f4aa"}
.ion-ios-skipforward:before{content:"\f4ad"}
.ion-ios-skipforward-outline:before{content:"\f4ac"}
.ion-ios-snowy:before{content:"\f4ae"}
.ion-ios-speedometer:before{content:"\f4b0"}
.ion-ios-speedometer-outline:before{content:"\f4af"}
.ion-ios-star:before{content:"\f4b3"}
.ion-ios-star-half:before{content:"\f4b1"}
.ion-ios-star-outline:before{content:"\f4b2"}
.ion-ios-stopwatch:before{content:"\f4b5"}
.ion-ios-stopwatch-outline:before{content:"\f4b4"}
.ion-ios-sunny:before{content:"\f4b7"}
.ion-ios-sunny-outline:before{content:"\f4b6"}
.ion-ios-telephone:before{content:"\f4b9"}
.ion-ios-telephone-outline:before{content:"\f4b8"}
.ion-ios-tennisball:before{content:"\f4bb"}
.ion-ios-tennisball-outline:before{content:"\f4ba"}
.ion-ios-thunderstorm:before{content:"\f4bd"}
.ion-ios-thunderstorm-outline:before{content:"\f4bc"}
.ion-ios-time:before{content:"\f4bf"}
.ion-ios-time-outline:before{content:"\f4be"}
.ion-ios-timer:before{content:"\f4c1"}
.ion-ios-timer-outline:before{content:"\f4c0"}
.ion-ios-toggle:before{content:"\f4c3"}
.ion-ios-toggle-outline:before{content:"\f4c2"}
.ion-ios-trash:before{content:"\f4c5"}
.ion-ios-trash-outline:before{content:"\f4c4"}
.ion-ios-undo:before{content:"\f4c7"}
.ion-ios-undo-outline:before{content:"\f4c6"}
.ion-ios-unlocked:before{content:"\f4c9"}
.ion-ios-unlocked-outline:before{content:"\f4c8"}
.ion-ios-upload:before{content:"\f4cb"}
.ion-ios-upload-outline:before{content:"\f4ca"}
.ion-ios-videocam:before{content:"\f4cd"}
.ion-ios-videocam-outline:before{content:"\f4cc"}
.ion-ios-volume-high:before{content:"\f4ce"}
.ion-ios-volume-low:before{content:"\f4cf"}
.ion-ios-wineglass:before{content:"\f4d1"}
.ion-ios-wineglass-outline:before{content:"\f4d0"}
.ion-ios-world:before{content:"\f4d3"}
.ion-ios-world-outline:before{content:"\f4d2"}
.ion-ipad:before{content:"\f1f9"}
.ion-iphone:before{content:"\f1fa"}
.ion-ipod:before{content:"\f1fb"}
.ion-jet:before{content:"\f295"}
.ion-key:before{content:"\f296"}
.ion-knife:before{content:"\f297"}
.ion-laptop:before{content:"\f1fc"}
.ion-leaf:before{content:"\f1fd"}
.ion-levels:before{content:"\f298"}
.ion-lightbulb:before{content:"\f299"}
.ion-link:before{content:"\f1fe"}
.ion-load-a:before{content:"\f29a"}
.ion-load-b:before{content:"\f29b"}
.ion-load-c:before{content:"\f29c"}
.ion-load-d:before{content:"\f29d"}
.ion-location:before{content:"\f1ff"}
.ion-lock-combination:before{content:"\f4d4"}
.ion-locked:before{content:"\f200"}
.ion-log-in:before{content:"\f29e"}
.ion-log-out:before{content:"\f29f"}
.ion-loop:before{content:"\f201"}
.ion-magnet:before{content:"\f2a0"}
.ion-male:before{content:"\f2a1"}
.ion-man:before{content:"\f202"}
.ion-map:before{content:"\f203"}
.ion-medkit:before{content:"\f2a2"}
.ion-merge:before{content:"\f33f"}
.ion-mic-a:before{content:"\f204"}
.ion-mic-b:before{content:"\f205"}
.ion-mic-c:before{content:"\f206"}
.ion-minus:before{content:"\f209"}
.ion-minus-circled:before{content:"\f207"}
.ion-minus-round:before{content:"\f208"}
.ion-model-s:before{content:"\f2c1"}
.ion-monitor:before{content:"\f20a"}
.ion-more:before{content:"\f20b"}
.ion-mouse:before{content:"\f340"}
.ion-music-note:before{content:"\f20c"}
.ion-navicon:before{content:"\f20e"}
.ion-navicon-round:before{content:"\f20d"}
.ion-navigate:before{content:"\f2a3"}
.ion-network:before{content:"\f341"}
.ion-no-smoking:before{content:"\f2c2"}
.ion-nuclear:before{content:"\f2a4"}
.ion-outlet:before{content:"\f342"}
.ion-paintbrush:before{content:"\f4d5"}
.ion-paintbucket:before{content:"\f4d6"}
.ion-paper-airplane:before{content:"\f2c3"}
.ion-paperclip:before{content:"\f20f"}
.ion-pause:before{content:"\f210"}
.ion-person:before{content:"\f213"}
.ion-person-add:before{content:"\f211"}
.ion-person-stalker:before{content:"\f212"}
.ion-pie-graph:before{content:"\f2a5"}
.ion-pin:before{content:"\f2a6"}
.ion-pinpoint:before{content:"\f2a7"}
.ion-pizza:before{content:"\f2a8"}
.ion-plane:before{content:"\f214"}
.ion-planet:before{content:"\f343"}
.ion-play:before{content:"\f215"}
.ion-playstation:before{content:"\f30a"}
.ion-plus:before{content:"\f218"}
.ion-plus-circled:before{content:"\f216"}
.ion-plus-round:before{content:"\f217"}
.ion-podium:before{content:"\f344"}
.ion-pound:before{content:"\f219"}
.ion-power:before{content:"\f2a9"}
.ion-pricetag:before{content:"\f2aa"}
.ion-pricetags:before{content:"\f2ab"}
.ion-printer:before{content:"\f21a"}
.ion-pull-request:before{content:"\f345"}
.ion-qr-scanner:before{content:"\f346"}
.ion-quote:before{content:"\f347"}
.ion-radio-waves:before{content:"\f2ac"}
.ion-record:before{content:"\f21b"}
.ion-refresh:before{content:"\f21c"}
.ion-reply:before{content:"\f21e"}
.ion-reply-all:before{content:"\f21d"}
.ion-ribbon-a:before{content:"\f348"}
.ion-ribbon-b:before{content:"\f349"}
.ion-sad:before{content:"\f34a"}
.ion-sad-outline:before{content:"\f4d7"}
.ion-scissors:before{content:"\f34b"}
.ion-search:before{content:"\f21f"}
.ion-settings:before{content:"\f2ad"}
.ion-share:before{content:"\f220"}
.ion-shuffle:before{content:"\f221"}
.ion-skip-backward:before{content:"\f222"}
.ion-skip-forward:before{content:"\f223"}
.ion-social-a:before{content:"\f225"}
.ion-social-a-outline:before{content:"\f224"}
.ion-social-angular:before{content:"\f4d9"}
.ion-social-angular-outline:before{content:"\f4d8"}
.ion-social-apple:before{content:"\f227"}
.ion-social-apple-outline:before{content:"\f226"}
.ion-social-bitcoin:before{content:"\f2af"}
.ion-social-bitcoin-outline:before{content:"\f2ae"}
.ion-social-buffer:before{content:"\f229"}
.ion-social-buffer-outline:before{content:"\f228"}
.ion-social-chrome:before{content:"\f4db"}
.ion-social-chrome-outline:before{content:"\f4da"}
.ion-social-codepen:before{content:"\f4dd"}
.ion-social-codepen-outline:before{content:"\f4dc"}
.ion-social-css3:before{content:"\f4df"}
.ion-social-css3-outline:before{content:"\f4de"}
.ion-social-designernews:before{content:"\f22b"}
.ion-social-designernews-outline:before{content:"\f22a"}
.ion-social-dribbble:before{content:"\f22d"}
.ion-social-dribbble-outline:before{content:"\f22c"}
.ion-social-dropbox:before{content:"\f22f"}
.ion-social-dropbox-outline:before{content:"\f22e"}
.ion-social-euro:before{content:"\f4e1"}
.ion-social-euro-outline:before{content:"\f4e0"}
.ion-social-facebook:before{content:"\f231"}
.ion-social-facebook-outline:before{content:"\f230"}
.ion-social-foursquare:before{content:"\f34d"}
.ion-social-foursquare-outline:before{content:"\f34c"}
.ion-social-freebsd-devil:before{content:"\f2c4"}
.ion-social-github:before{content:"\f233"}
.ion-social-github-outline:before{content:"\f232"}
.ion-social-google:before{content:"\f34f"}
.ion-social-google-outline:before{content:"\f34e"}
.ion-social-googleplus:before{content:"\f235"}
.ion-social-googleplus-outline:before{content:"\f234"}
.ion-social-hackernews:before{content:"\f237"}
.ion-social-hackernews-outline:before{content:"\f236"}
.ion-social-html5:before{content:"\f4e3"}
.ion-social-html5-outline:before{content:"\f4e2"}
.ion-social-instagram:before{content:"\f351"}
.ion-social-instagram-outline:before{content:"\f350"}
.ion-social-javascript:before{content:"\f4e5"}
.ion-social-javascript-outline:before{content:"\f4e4"}
.ion-social-linkedin:before{content:"\f239"}
.ion-social-linkedin-outline:before{content:"\f238"}
.ion-social-markdown:before{content:"\f4e6"}
.ion-social-nodejs:before{content:"\f4e7"}
.ion-social-octocat:before{content:"\f4e8"}
.ion-social-pinterest:before{content:"\f2b1"}
.ion-social-pinterest-outline:before{content:"\f2b0"}
.ion-social-python:before{content:"\f4e9"}
.ion-social-reddit:before{content:"\f23b"}
.ion-social-reddit-outline:before{content:"\f23a"}
.ion-social-rss:before{content:"\f23d"}
.ion-social-rss-outline:before{content:"\f23c"}
.ion-social-sass:before{content:"\f4ea"}
.ion-social-skype:before{content:"\f23f"}
.ion-social-skype-outline:before{content:"\f23e"}
.ion-social-snapchat:before{content:"\f4ec"}
.ion-social-snapchat-outline:before{content:"\f4eb"}
.ion-social-tumblr:before{content:"\f241"}
.ion-social-tumblr-outline:before{content:"\f240"}
.ion-social-tux:before{content:"\f2c5"}
.ion-social-twitch:before{content:"\f4ee"}
.ion-social-twitch-outline:before{content:"\f4ed"}
.ion-social-twitter:before{content:"\f243"}
.ion-social-twitter-outline:before{content:"\f242"}
.ion-social-usd:before{content:"\f353"}
.ion-social-usd-outline:before{content:"\f352"}
.ion-social-vimeo:before{content:"\f245"}
.ion-social-vimeo-outline:before{content:"\f244"}
.ion-social-whatsapp:before{content:"\f4f0"}
.ion-social-whatsapp-outline:before{content:"\f4ef"}
.ion-social-windows:before{content:"\f247"}
.ion-social-windows-outline:before{content:"\f246"}
.ion-social-wordpress:before{content:"\f249"}
.ion-social-wordpress-outline:before{content:"\f248"}
.ion-social-yahoo:before{content:"\f24b"}
.ion-social-yahoo-outline:before{content:"\f24a"}
.ion-social-yen:before{content:"\f4f2"}
.ion-social-yen-outline:before{content:"\f4f1"}
.ion-social-youtube:before{content:"\f24d"}
.ion-social-youtube-outline:before{content:"\f24c"}
.ion-soup-can:before{content:"\f4f4"}
.ion-soup-can-outline:before{content:"\f4f3"}
.ion-speakerphone:before{content:"\f2b2"}
.ion-speedometer:before{content:"\f2b3"}
.ion-spoon:before{content:"\f2b4"}
.ion-star:before{content:"\f24e"}
.ion-stats-bars:before{content:"\f2b5"}
.ion-steam:before{content:"\f30b"}
.ion-stop:before{content:"\f24f"}
.ion-thermometer:before{content:"\f2b6"}
.ion-thumbsdown:before{content:"\f250"}
.ion-thumbsup:before{content:"\f251"}
.ion-toggle:before{content:"\f355"}
.ion-toggle-filled:before{content:"\f354"}
.ion-transgender:before{content:"\f4f5"}
.ion-trash-a:before{content:"\f252"}
.ion-trash-b:before{content:"\f253"}
.ion-trophy:before{content:"\f356"}
.ion-tshirt:before{content:"\f4f7"}
.ion-tshirt-outline:before{content:"\f4f6"}
.ion-umbrella:before{content:"\f2b7"}
.ion-university:before{content:"\f357"}
.ion-unlocked:before{content:"\f254"}
.ion-upload:before{content:"\f255"}
.ion-usb:before{content:"\f2b8"}
.ion-videocamera:before{content:"\f256"}
.ion-volume-high:before{content:"\f257"}
.ion-volume-low:before{content:"\f258"}
.ion-volume-medium:before{content:"\f259"}
.ion-volume-mute:before{content:"\f25a"}
.ion-wand:before{content:"\f358"}
.ion-waterdrop:before{content:"\f25b"}
.ion-wifi:before{content:"\f25c"}
.ion-wineglass:before{content:"\f2b9"}
.ion-woman:before{content:"\f25d"}
.ion-wrench:before{content:"\f2ba"}
.ion-xbox:before{content:"\f30c"}
Результат, HTML классы, CSS код символа:
