Иконки awesome: Иконки Font awesome — скачивайте бесплатно в PNG и SVG

Надеюсь Вы думаете что Font Awesome — аху**ый. Я потратил сотни часов работая над этим шрифтом, создав опен-сорс сообщество и работая совместно с людьми. .

Чем помочь?

Распространяйте иконки для того что бы Font Awesome стал более популярным.

Помогите Дейву купить iMac

Пожертвования В качестве благодарности Дейву за предоставленный шрифт, Дейв мечтает о новом алюминиевом и серебристом iMac для того что бы он мог продолжать творить.

Лист желаний Дейва на Amazon

Выберите что-то конкретное из листа желаний Дейва в качестве благодарности.

Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome | Торгово

Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome?

Font Awesome — что это?

Font Awesome — это набор готовых масштабируемых иконок для сайта. Иконки Font Awesome можно добавлять на сайт, как обычный текст и через CSS. Это даёт возможность изменять цвет, шрифт, тень иконок и многое другое. Для использования на своём сайте иконок Font Awesome необходимо подключить файл стилей иконок.

Файл стилей иконок Font Awesome подключается в главном файле сайта между тэгами и :

После того, как файл стилей подключен, можно использовать иконки на своем сайте.

Как использовать иконки Font Awesome на сайте:

Пример добавления класса для увеличения иконки Font Awesome:

fa-lg fa-2x fa-3x fa-4x fa-5x

Используя класс fa-fw можно зафиксировать ширину иконки. Используется для создания меню с иконками.

• Главная
• Библиотека
• Приложения
• Настройки

• Главная
• Каталог
• О нас
• Контакты

Классы fa-ul и fa-li заменяют маркеры по умолчанию в …

• элемент списка
• элемент списка
• элемент списка

• элемент списка
• элемент списка
• элемент списка

Добавив классы fa-spin, fa-pulse, fa-spinner, fa-refresh или fa-cog сделаем вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.

Используя псевдокласс :before иконку можно добавить перед текстом, а при помощи псевдокласса :after иконка добавится после текста.

.cssclass:before { content: «\f039»; }

В параметре контент указываем не название иконки а её код.

Таблица значений иконок Font Awesome

fa-glass»\f000″

fa-music»\f001″

fa-search»\f002″

fa-envelope-o»\f003″

fa-heart»\f004″

fa-star»\f005″

fa-star-o»\f006″

fa-user»\f007″

fa-film»\f008″

fa-th-large»\f009″

fa-th»\f00a»

fa-th-list»\f00b»

fa-check»\f00c»

fa-times»\f00d»

fa-search-plus»\f00e»

fa-search-minus»\f010″

fa-power-off»\f011″

fa-signal»\f012″

fa-cog»\f013″

fa-trash-o»\f014″

fa-home»\f015″

fa-file-o»\f016″

fa-clock-o»\f017″

fa-road»\f018″

fa-download»\f019″

fa-arrow-circle-o-down»\f01a»

fa-arrow-circle-o-up»\f01b»

fa-inbox»\f01c»

fa-play-circle-o»\f01d»

fa-repeat»\f01e»

fa-refresh»\f021″

fa-list-alt»\f022″

fa-lock»\f023″

fa-flag»\f024″

fa-headphones»\f025″

fa-volume-off»\f026″

fa-volume-down»\f027″

fa-volume-up»\f028″

fa-qrcode»\f029″

fa-barcode»\f02a»

fa-tag»\f02b»

fa-tags»\f02c»

fa-book»\f02d»

fa-bookmark»\f02e»

fa-print»\f02f»

fa-camera»\f030″

fa-font»\f031″

fa-bold»\f032″

fa-italic»\f033″

fa-text-height»\f034″

fa-text-width»\f035″

fa-align-left»\f036″

fa-align-center»\f037″

fa-align-right»\f038″

fa-align-justify»\f039″

fa-list»\f03a»

fa-outdent»\f03b»

fa-indent»\f03c»

fa-video-camera»\f03d»

fa-picture-o»\f03e»

fa-pencil»\f040″

fa-map-marker»\f041″

fa-adjust»\f042″

fa-tint»\f043″

fa-pencil-square-o»\f044″

fa-share-square-o»\f045″

fa-check-square-o»\f046″

fa-arrows»\f047″

fa-step-backward»\f048″

fa-fast-backward»\f049″

fa-backward»\f04a»

fa-play»\f04b»

fa-pause»\f04c»

fa-stop»\f04d»

fa-forward»\f04e»

fa-fast-forward»\f050″

fa-step-forward»\f051″

fa-eject»\f052″

fa-chevron-left»\f053″

fa-chevron-right»\f054″

fa-plus-circle»\f055″

fa-minus-circle»\f056″

fa-times-circle»\f057″

fa-check-circle»\f058″

fa-question-circle»\f059″

fa-info-circle»\f05a»

fa-crosshairs»\f05b»

fa-times-circle-o»\f05c»

fa-check-circle-o»\f05d»

fa-ban»\f05e»

fa-arrow-left»\f060″

fa-arrow-right»\f061″

fa-arrow-up»\f062″

fa-arrow-down»\f063″

fa-share»\f064″

fa-expand»\f065″

fa-compress»\f066″

fa-plus»\f067″

fa-minus»\f068″

fa-asterisk»\f069″

fa-exclamation-circle»\f06a»

fa-gift»\f06b»

fa-leaf»\f06c»

fa-fire»\f06d»

fa-eye»\f06e»

fa-eye-slash»\f070″

fa-exclamation-triangle»\f071″

fa-plane»\f072″

fa-calendar»\f073″

fa-random»\f074″

fa-comment»\f075″

fa-magnet»\f076″

fa-chevron-up»\f077″

fa-chevron-down»\f078″

fa-retweet»\f079″

fa-shopping-cart»\f07a»

fa-folder»\f07b»

fa-folder-open»\f07c»

fa-arrows-v»\f07d»

fa-arrows-h»\f07e»

fa-bar-chart»\f080″

fa-twitter-square»\f081″

fa-facebook-square»\f082″

fa-camera-retro»\f083″

fa-key»\f084″

fa-cogs»\f085″

fa-comments»\f086″

fa-thumbs-o-up»\f087″

fa-thumbs-o-down»\f088″

fa-star-half»\f089″

fa-heart-o»\f08a»

fa-sign-out»\f08b»

fa-linkedin-square»\f08c»

fa-thumb-tack»\f08d»

fa-external-link»\f08e»

fa-sign-in»\f090″

fa-trophy»\f091″

fa-github-square»\f092″

fa-upload»\f093″

fa-lemon-o»\f094″

fa-phone»\f095″

fa-square-o»\f096″

fa-bookmark-o»\f097″

fa-phone-square»\f098″

fa-twitter»\f099″

fa-facebook»\f09a»

fa-github»\f09b»

fa-unlock»\f09c»

fa-credit-card»\f09d»

fa-rss»\f09e»

fa-hdd-o»\f0a0″

fa-bullhorn»\f0a1″

fa-bell»\f0f3″

fa-certificate»\f0a3″

fa-hand-o-right»\f0a4″

fa-hand-o-left»\f0a5″

fa-hand-o-up»\f0a6″

fa-hand-o-down»\f0a7″

fa-arrow-circle-left»\f0a8″

fa-arrow-circle-right»\f0a9″

fa-arrow-circle-up»\f0aa»

fa-arrow-circle-down»\f0ab»

fa-globe»\f0ac»

fa-wrench»\f0ad»

fa-tasks»\f0ae»

fa-filter»\f0b0″

fa-briefcase»\f0b1″

fa-arrows-alt»\f0b2″

fa-users»\f0c0″

fa-link»\f0c1″

fa-cloud»\f0c2″

fa-flask»\f0c3″

fa-scissors»\f0c4″

fa-files-o»\f0c5″

fa-paperclip»\f0c6″

fa-floppy-o»\f0c7″

fa-square»\f0c8″

fa-bars»\f0c9″

fa-list-ul»\f0ca»

fa-list-ol»\f0cb»

fa-strikethrough»\f0cc»

fa-underline»\f0cd»

fa-table»\f0ce»

fa-magic»\f0d0″

fa-truck»\f0d1″

fa-pinterest»\f0d2″

fa-pinterest-square»\f0d3″

fa-google-plus-square»\f0d4″

fa-google-plus»\f0d5″

fa-money»\f0d6″

fa-caret-down»\f0d7″

fa-caret-up»\f0d8″

fa-caret-left»\f0d9″

fa-caret-right»\f0da»

fa-columns»\f0db»

fa-sort»\f0dc»

fa-sort-desc»\f0dd»

fa-sort-asc»\f0de»

fa-envelope»\f0e0″

fa-linkedin»\f0e1″

fa-undo»\f0e2″

fa-gavel»\f0e3″

fa-tachometer»\f0e4″

fa-comment-o»\f0e5″

fa-comments-o»\f0e6″

fa-bolt»\f0e7″

fa-sitemap»\f0e8″

fa-umbrella»\f0e9″

fa-clipboard»\f0ea»

fa-lightbulb-o»\f0eb»

fa-exchange»\f0ec»

fa-cloud-download»\f0ed»

fa-cloud-upload»\f0ee»

fa-user-md»\f0f0″

fa-stethoscope»\f0f1″

fa-suitcase»\f0f2″

fa-bell-o»\f0a2″

fa-coffee»\f0f4″

fa-cutlery»\f0f5″

fa-file-text-o»\f0f6″

fa-building-o»\f0f7″

fa-hospital-o»\f0f8″

fa-ambulance»\f0f9″

fa-medkit»\f0fa»

fa-fighter-jet»\f0fb»

fa-beer»\f0fc»

fa-h-square»\f0fd»

fa-plus-square»\f0fe»

fa-angle-double-left»\f100″

fa-angle-double-right»\f101″

fa-angle-double-up»\f102″

fa-angle-double-down»\f103″

fa-angle-left»\f104″

fa-angle-right»\f105″

fa-angle-up»\f106″

fa-angle-down»\f107″

fa-desktop»\f108″

fa-laptop»\f109″

fa-tablet»\f10a»

fa-mobile»\f10b»

fa-circle-o»\f10c»

fa-quote-left»\f10d»

fa-quote-right»\f10e»

fa-spinner»\f110″

fa-circle»\f111″

fa-reply»\f112″

fa-github-alt»\f113″

fa-folder-o»\f114″

fa-folder-open-o»\f115″

fa-smile-o»\f118″

fa-frown-o»\f119″

fa-meh-o»\f11a»

fa-gamepad»\f11b»

fa-keyboard-o»\f11c»

fa-flag-o»\f11d»

fa-flag-checkered»\f11e»

fa-terminal»\f120″

fa-code»\f121″

fa-reply-all»\f122″

fa-star-half-o»\f123″

fa-location-arrow»\f124″

fa-crop»\f125″

fa-code-fork»\f126″

fa-chain-broken»\f127″

fa-question»\f128″

fa-info»\f129″

fa-exclamation»\f12a»

fa-superscript»\f12b»

fa-subscript»\f12c»

fa-eraser»\f12d»

fa-puzzle-piece»\f12e»

fa-microphone»\f130″

fa-microphone-slash»\f131″

fa-shield»\f132″

fa-calendar-o»\f133″

fa-fire-extinguisher»\f134″

fa-rocket»\f135″

fa-maxcdn»\f136″

fa-chevron-circle-left»\f137″

fa-chevron-circle-right»\f138″

fa-chevron-circle-up»\f139″

fa-chevron-circle-down»\f13a»

fa-html5″\f13b»

fa-css3″\f13c»

fa-anchor»\f13d»

fa-unlock-alt»\f13e»

fa-bullseye»\f140″

fa-ellipsis-h»\f141″

fa-ellipsis-v»\f142″

fa-rss-square»\f143″

fa-play-circle»\f144″

fa-ticket»\f145″

fa-minus-square»\f146″

fa-minus-square-o»\f147″

fa-level-up»\f148″

fa-level-down»\f149″

fa-check-square»\f14a»

fa-pencil-square»\f14b»

fa-external-link-square»\f14c»

fa-share-square»\f14d»

fa-compass»\f14e»

fa-caret-square-o-down»\f150″

fa-caret-square-o-up»\f151″

fa-caret-square-o-right»\f152″

fa-eur»\f153″

fa-gbp»\f154″

fa-usd»\f155″

fa-inr»\f156″

fa-jpy»\f157″

fa-rub»\f158″

fa-krw»\f159″

fa-btc»\f15a»

fa-file»\f15b»

fa-file-text»\f15c»

fa-sort-alpha-asc»\f15d»

fa-sort-alpha-desc»\f15e»

fa-sort-amount-asc»\f160″

fa-sort-amount-desc»\f161″

fa-sort-numeric-asc»\f162″

fa-sort-numeric-desc»\f163″

fa-thumbs-up»\f164″

fa-thumbs-down»\f165″

fa-youtube-square»\f166″

fa-youtube»\f167″

fa-xing»\f168″

fa-xing-square»\f169″

fa-youtube-play»\f16a»

fa-dropbox»\f16b»

fa-stack-overflow»\f16c»

fa-instagram»\f16d»

fa-flickr»\f16e»

fa-adn»\f170″

fa-bitbucket»\f171″

fa-bitbucket-square»\f172″

fa-tumblr»\f173″

fa-tumblr-square»\f174″

fa-long-arrow-down»\f175″

fa-long-arrow-up»\f176″

fa-long-arrow-left»\f177″

fa-long-arrow-right»\f178″

fa-apple»\f179″

fa-windows»\f17a»

fa-android»\f17b»

fa-linux»\f17c»

fa-dribbble»\f17d»

fa-skype»\f17e»

fa-foursquare»\f180″

fa-trello»\f181″

fa-female»\f182″

fa-male»\f183″

fa-gratipay»\f184″

fa-sun-o»\f185″

fa-moon-o»\f186″

fa-archive»\f187″

fa-bug»\f188″

fa-vk»\f189″

fa-weibo»\f18a»

fa-renren»\f18b»

fa-pagelines»\f18c»

fa-stack-exchange»\f18d»

fa-arrow-circle-o-right»\f18e»

fa-arrow-circle-o-left»\f190″

fa-caret-square-o-left»\f191″

fa-dot-circle-o»\f192″

fa-wheelchair»\f193″

fa-vimeo-square»\f194″

fa-try»\f195″

fa-plus-square-o»\f196″

fa-space-shuttle»\f197″

fa-slack»\f198″

fa-envelope-square»\f199″

fa-wordpress»\f19a»

fa-openid»\f19b»

fa-university»\f19c»

fa-graduation-cap»\f19d»

fa-yahoo»\f19e»

fa-google»\f1a0″

fa-reddit»\f1a1″

fa-reddit-square»\f1a2″

fa-stumbleupon-circle»\f1a3″

fa-stumbleupon»\f1a4″

fa-delicious»\f1a5″

fa-digg»\f1a6″

fa-pied-piper»\f1a7″

fa-pied-piper-alt»\f1a8″

fa-drupal»\f1a9″

fa-joomla»\f1aa»

fa-language»\f1ab»

fa-fax»\f1ac»

fa-building»\f1ad»

fa-child»\f1ae»

fa-paw»\f1b0″

fa-spoon»\f1b1″

fa-cube»\f1b2″

fa-cubes»\f1b3″

fa-behance»\f1b4″

fa-behance-square»\f1b5″

fa-steam»\f1b6″

fa-steam-square»\f1b7″

fa-recycle»\f1b8″

fa-car»\f1b9″

fa-taxi»\f1ba»

fa-tree»\f1bb»

fa-spotify»\f1bc»

fa-deviantart»\f1bd»

fa-soundcloud»\f1be»

fa-database»\f1c0″

fa-file-pdf-o»\f1c1″

fa-file-word-o»\f1c2″

fa-file-excel-o»\f1c3″

fa-file-powerpoint-o»\f1c4″

fa-file-image-o»\f1c5″

fa-file-archive-o»\f1c6″

fa-file-audio-o»\f1c7″

fa-file-video-o»\f1c8″

fa-file-code-o»\f1c9″

fa-vine»\f1ca»

fa-codepen»\f1cb»

fa-jsfiddle»\f1cc»

fa-life-ring»\f1cd»

fa-circle-o-notch»\f1ce»

fa-rebel»\f1d0″

fa-empire»\f1d1″

fa-git-square»\f1d2″

fa-git»\f1d3″

fa-hacker-news»\f1d4″

fa-tencent-weibo»\f1d5″

fa-qq»\f1d6″

fa-weixin»\f1d7″

fa-paper-plane»\f1d8″

fa-paper-plane-o»\f1d9″

fa-history»\f1da»

fa-circle-thin»\f1db»

fa-header»\f1dc»

fa-paragraph»\f1dd»

fa-sliders»\f1de»

fa-share-alt»\f1e0″

fa-share-alt-square»\f1e1″

fa-bomb»\f1e2″

fa-futbol-o»\f1e3″

fa-tty»\f1e4″

fa-binoculars»\f1e5″

fa-plug»\f1e6″

fa-slideshare»\f1e7″

fa-twitch»\f1e8″

fa-yelp»\f1e9″

fa-newspaper-o»\f1ea»

fa-wifi»\f1eb»

fa-calculator»\f1ec»

fa-paypal»\f1ed»

fa-google-wallet»\f1ee»

fa-cc-visa»\f1f0″

fa-cc-mastercard»\f1f1″

fa-cc-discover»\f1f2″

fa-cc-amex»\f1f3″

fa-cc-paypal»\f1f4″

fa-cc-stripe»\f1f5″

fa-bell-slash»\f1f6″

fa-bell-slash-o»\f1f7″

fa-trash»\f1f8″

fa-copyright»\f1f9″

fa-at»\f1fa»

fa-eyedropper»\f1fb»

fa-paint-brush»\f1fc»

fa-birthday-cake»\f1fd»

fa-area-chart»\f1fe»

fa-pie-chart»\f200″

fa-line-chart»\f201″

fa-lastfm»\f202″

fa-lastfm-square»\f203″

fa-toggle-off»\f204″

fa-toggle-on»\f205″

fa-bicycle»\f206″

fa-bus»\f207″

fa-ioxhost»\f208″

fa-angellist»\f209″

fa-cc»\f20a»

fa-ils»\f20b»

fa-meanpath»\f20c»

fa-buysellads»\f20d»

fa-connectdevelop»\f20e»

fa-dashcube»\f210″

fa-forumbee»\f211″

fa-leanpub»\f212″

fa-sellsy»\f213″

fa-shirtsinbulk»\f214″

fa-simplybuilt»\f215″

fa-skyatlas»\f216″

fa-cart-plus»\f217″

fa-cart-arrow-down»\f218″

fa-diamond»\f219″

fa-ship»\f21a»

fa-user-secret»\f21b»

fa-motorcycle»\f21c»

fa-street-view»\f21d»

fa-heartbeat»\f21e»

fa-venus»\f221″

fa-mars»\f222″

fa-mercury»\f223″

fa-transgender»\f224″

fa-transgender-alt»\f225″

fa-venus-double»\f226″

fa-mars-double»\f227″

fa-venus-mars»\f228″

fa-mars-stroke»\f229″

fa-mars-stroke-v»\f22a»

fa-mars-stroke-h»\f22b»

fa-neuter»\f22c»

fa-genderless»\f22d»

fa-facebook-official»\f230″

fa-pinterest-p»\f231″

fa-whatsapp»\f232″

fa-server»\f233″

fa-user-plus»\f234″

fa-user-times»\f235″

fa-bed»\f236″

fa-viacoin»\f237″

fa-train»\f238″

fa-subway»\f239″

fa-medium»\f23a»

fa-y-combinator»\f23b»

fa-optin-monster»\f23c»

fa-opencart»\f23d»

fa-expeditedssl»\f23e»

fa-battery-full»\f240″

fa-battery-three-quarters»\f241″

fa-battery-half»\f242″

fa-battery-quarter»\f243″

fa-battery-empty»\f244″

fa-mouse-pointer»\f245″

fa-i-cursor»\f246″

fa-object-group»\f247″

fa-object-ungroup»\f248″

fa-sticky-note»\f249″

fa-sticky-note-o»\f24a»

fa-cc-jcb»\f24b»

fa-cc-diners-club»\f24c»

fa-clone»\f24d»

fa-balance-scale»\f24e»

fa-hourglass-o»\f250″

fa-hourglass-start»\f251″

fa-hourglass-half»\f252″

fa-hourglass-end»\f253″

fa-hourglass»\f254″

fa-hand-rock-o»\f255″

fa-hand-paper-o»\f256″

fa-hand-scissors-o»\f257″

fa-hand-lizard-o»\f258″

fa-hand-spock-o»\f259″

fa-hand-pointer-o»\f25a»

fa-hand-peace-o»\f25b»

fa-trademark»\f25c»

fa-registered»\f25d»

fa-creative-commons»\f25e»

fa-gg»\f260″

fa-gg-circle»\f261″

fa-tripadvisor»\f262″

fa-odnoklassniki»\f263″

fa-odnoklassniki-square»\f264″

fa-get-pocket»\f265″

fa-wikipedia-w»\f266″

fa-safari»\f267″

fa-chrome»\f268″

fa-firefox»\f269″

fa-opera»\f26a»

fa-internet-explorer»\f26b»

fa-television»\f26c»

fa-contao»\f26d»

fa-500px»\f26e»

fa-amazon»\f270″

fa-calendar-plus-o»\f271″

fa-calendar-minus-o»\f272″

fa-calendar-times-o»\f273″

fa-calendar-check-o»\f274″

fa-industry»\f275″

fa-map-pin»\f276″

fa-map-signs»\f277″

fa-map-o»\f278″

fa-map»\f279″

fa-commenting»\f27a»

fa-commenting-o»\f27b»

fa-houzz»\f27c»

fa-vimeo»\f27d»

fa-black-tie»\f27e»

fa-fonticons»\f280″

Font awesome: полезные приемы — dr.

Конечно, практически все, кто причастен к веб-разработке, слышали про Font Awesome. Кроме того, многие из нас ежедневно используют эту библиотеку шрифтов в своих проектах.

Если, вдруг, Вы не знаете о чем идет речь, Font Awesome — потрясающая библиотека иконок для веб-приложений и сайтов, которая содержит тысячи элементов, предназначенных для совершенно различных целей.

Иконки созданы в SVG, но нет причины беспокоиться, в данном случае Вам не нужны какие-либо знания о работе с SVG.

Содержание

Начало

Для размещения иконок Font Awesome использует следующий код:

<i></i>

В результате мы получим милую маленьку звездочку:

Стили

Для иконок Font Awesome существует четыре стиля:

1. Solid
2. Regular
3. Light
4. Duotone

При этом иконки solid практически все бесплатные. Остальные — доступны только в pro-версии.

Как это работает?

Объявление CSS-классов для тега i происходит следующим образом:

Сначала идет класс, определяющий выбранный стиль:

1. fas для solid,
2. far для regular,
3. fal для light,
4. fad для duotone.

Затем следует класс самой иконки:

1. который всегда начинается с префикса fa-
2. и заканчивается именем иконки.

Итак, основы использования Font Awesome оказались достаточно просты. Переходим к некоторым полезным приемам.

Приемы

Как изменить размер иконки?

Именно так, Font Awesome позволяет нам изменять размер иконки, не вмешиваясь в CSS-код, достаточно выбрать соответствующий класс для элемента:

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>

Так будет выглядеть иконка в размере xs:

так — в размере 5x:

а так — в размере 10x:

Это просто, не правда ли?

Как сделать иконку маркером списка?

Для этого нужно:

1. Добавить класс fa-ul для тега списка ul,

2. Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li.

   <ul>
   <li><span><i></i></span>Иконки Font Awesome</li>
   <li><span><i></i></span>могут</li>
   <li><span><i></i></span>заменить маркеры HTML-списка</li>
   <li><span><i></i></span>не меняя CSS</li>
   </ul>
   

А вот и результат:

• Иконки Font Awesome
• могут
• заменить маркеры HTML-списка
• не меняя CSS

Вращение иконки

Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

Вот что означают эти классы:

1. fa-rotate-90 поворот на 90^o по часовой стрелке,
2. fa-rotate-180 поворот на 180^o по часовой стрелке,
3. fa-rotate-270 поворот на 270^o по часовой стрелке,
4. fa-flip-horizontal отражение по горизонтали,
5. fa-flip-vertical отражение по вертикали,
6. fa-flip-both отражение по горизонтали и вертикали (только для версий 5. 7.0 и выше).

Так выглядит иконка в стандартном положении:

так при повороте на 180^o:

а так отраженная по вертикали:

Как анимировать иконки?

Классы fa-spin и fa-pulse добавят немного динамики выбранным иконкам:

<i></i>
<i></i>

Вот пример с классом fa-spin:

а это вариант с fa-pulse:

Как объединить иконки?

Для этого нужно обернуть объединяемые иконки в родительский элемент с классом fa-stack:

<span>
  <i></i>
  <i></i>
</span>

Результат:

Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome

Как масштабировать иконку относительно контейнера (power transforming)?

Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform:

1. grow-# для увеличения (# — целое число),

2. shrink-# для уменьшения (# — целое число).

   <div>
   <i data-fa-transform="shrink-8"></i>
   <i></i>
   <i data-fa-transform="grow-6"></i>
   </div>
   

Вот что получится при уменьшении shrink-8:

Без изменений:

Вот что получится при увеличении grow-6:

Как позиционировать иконку?

Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:

1. up-# для смещения вверх,
2. down-# для смещения вниз,
3. left-# для смещения влево,
4. right-# для смещения вправо.

где # — число, которое может содержать десятичные значения.

<div>
  <i data-fa-transform="shrink-8"></i>
  <i data-fa-transform="shrink-8 up-6"></i>
  <i data-fa-transform="shrink-8 right-6"></i>
  <i data-fa-transform="shrink-8 down-6"></i>
  <i data-fa-transform="shrink-8 left-6"></i>
</div>

Результат подобен абсолютному позиционированию в CSS.

Так будет выглядеть смещение иконки вверх относительно контейнера:

а так — смещение влево:

Как создать маску для иконки?

Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута data-fa-mask, в который мы помещаем классы фоновой иконки:

<div>
  <i data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>

Результат:

Таким образом, мы объединили

<i></i>

с

<i></i>

Как добавить текст к иконке?

Да, поверх иконки можно что-то написать.

<span>
  <i></i>
  <span data-fa-transform="shrink-8 down-3">27</span>
</span>
<span>
  <i></i>
  <span data-fa-transform="shrink-11.5 rotate--30">NEW</span>
</span>

Для этого нужно:

1. создать обертку span с классом fa-layers,
2. внутри обертки добавить иконку i,
3. после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.

А вот и результат:

27

и еще:

NEW

Как к иконке добавить счетчик?

Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.

<span>
  <i></i>
  <span>1,419</span>
</span>

Нужно:

1. создать обертку span с классом fa-layers,
2. внутри обертки добавить иконку i,
3. после которой должен следовать элемент span с классом fa-layers-counter.

По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:

1. fa-layers-bottom-left внизу слева,
2. fa-layers-bottom-right внизу справа,
3. fa-layers-top-left вверху слева,
4. fa-layers-top-right вверху справа (значение по умолчанию).

Результат:

1,419

Спасибо за внимание.

Перевод статьи Kiss Patrik “Font Awesome guide and useful tricks you might not know about”.

Font Awesome (Cart icon)

Посмотреть обсуждение на форуме CS-Cart

Font Awesome — добавляет иконочный шрифт и меняет иконку корзины и профиля, а так же поведение их содержащих блоков

Важно: вы подключаете иконочный шрифт содержащий 675 иконок, это скажется на скорости загрузки вашего сайта (для ускорения включите для своего сервера кеширование в браузере)

В нем доступны следующие возможности:

• Подключается иконочный шрифт Font Awesome
• Более чем 600 новых иконок для вашего магазина
• Нет необходимости в JavaScript
• Управление через CSS
• Бесконечная масштабируемость
• Поддержка Retina-дисплеев
• Совместимость с экранными дикторами
• В панели администратора, иконки легко искать и добавлять непосредственно в редакторе
• Также для Вашего удобства, мы реализовали замены стандартной иконки корзины на один из трех предложенных вариантов

Новые возможности (версия 4.

• Отображение контента выпадающего блока, по наведению или по нажатию
• Возможность изменения иконки пользователя
• Превью для выбранных иконок
• Возможность изменить размер и цвет иконок

1. Нажмите иконку флага . Откроется окно с выбором иконок

2. Для поиска иконки вы можете воспользоваться строкой ввода расположенной снизу. Нажмите выбранную иконку и она добавиться в текст

1. Нажмите иконку флага . Откроется окно с выбором иконок

2. Для поиска иконки вы можете воспользоваться строкой ввода расположенной снизу. Нажмите выбранную иконку и она добавиться в текст

1. Воспользуйтесь поиском на сайте Font Awesome

2. Скопируйте HTML код

Product

• CS-Cart
• Multi-Vendor
• CS-Cart Ultimate
• Multi-Vendor Ultimate

Compatible versions

• 4.6.3
• 4.5.2
• 4.4.3

Localisations

• English
• Русский

Comment

Значительно ухудшает скорость сайта по методу PageSpeed Insights
Возможно это связано с тем, что каждый раз идет обращение к сторонней библиотеке.

В итоге удалил.

Comment

Great addon to easy change the cart icon for CS-Cart, I had put it in the wrong folder but after a quick respons from the developers it now works fine.

Thank you.

Comment

Let me first say that this free addon is a real nice and very useful addon. Really awesome to start with.

Secondly it really works nice, easy to install and just a real treat. You should checkout their other two addons.

Как использовать Font Awesome на вашем сайте WordPress

Когда предоставляется выбор между использованием значка вектора или статического изображения, рекомендуется использовать вектор. Они небольшие и быстро загружаются и могут масштабироваться до любого размера без потери разрешения. Font Awesome – это превосходная библиотека векторных иконок, которые вы можете использовать на своих сайтах, и они, вероятно, имеют практически любую форму или марку, которая вам понадобится. И лучше всего? Это бесплатно. Во-вторых, это просто.

Font Awesome WordPress Иконки

Использование библиотеки Font Awesome на вашем сайте WordPress относительно безболезненно. Выполнив эти простые шаги, вы сможете сократить время загрузки страницы и создать действительно чистые и четкие рисунки, используя эти значки в качестве части своей работы.

Следует помнить, что (в большинстве случаев) иконки Font Awesome будут доставляться на ваш сайт как настоящие шрифты. Отсюда и название Font Awesome. Вы сможете стиль и манипулировать ими во всех отношениях.

Из-за этого вам не придется беспокоиться о размере или интервале для каждого отдельного браузера или области просмотра. Если это звучит здорово, это потому, что это так. А вот как вы это можно сделать:

Установка Font Awesome

Хотя есть ручной способ установки и использования Font Awesome, есть лучший способ для пользователей WordPress. Прекрасные ребята из FA выпустили официальный плагин Font Awesome для WordPress, и он прекрасно работает.

С установленным и активированным плагином у вас теперь есть доступ к шорткоду [[icon name]], а также к фрагментам HTML. До тех пор, пока вы держите в руках удобный список значков FA, вы точно знаете, какой значок вам нужен. Вы увидите на странице настроек плагина (находится в разделе « Настройки» – «Font Awesome» ), как все настроено по умолчанию. В общем, это хорошо для хранения и использования. Большинству людей больше ничего не нужно.

Параметр Метод, вероятно, является наиболее важным для большинства людей. Вы можете переключаться между Webfont или SVG. В то время как SVG предоставляет вам больше возможностей и функций (таких как силовые преобразования и маскирование), Font Awesome CDN будет предоставлять значки в виде файлов SVG, а не в виде шрифта. Хотя это лучше в некоторых отношениях, SVG не распознается многими браузерами, и WordPress не всегда хорошо работает с изображениями SVG. Поэтому мы рекомендуем играть безопасно с версией веб-шрифта.

То же самое относится и к Font Awesome: если вы не уверены в разнице или не знаете, зачем вам нужно использовать SVG, тогда придерживаться метода webfont по умолчанию, вероятно, проще всего.

Использовать иконки Font Awesome на вашем сайте WordPress очень просто. Просто добавьте <i class = “fab fa-wordpress”> </ i> в любое место, где вы хотите, чтобы значок появлялся. Обязательно проверьте библиотеку значков, чтобы узнать, какое имя вставить.

Примечание: шорткоды в плагине являются хитами. Некоторые значки отображаются отлично, в то время как другие отображаются пустыми. Мы рекомендуем придерживаться HTML-вставки, если вы не видите, что шорткод работает для вас. См. Ниже пример WordPress, приведенный выше: не рендеринг, а значок камеры.

Плагин Font Awesome WordPress отлично подходит для людей, которым неудобно заходить в свою тему или файлы для вставки необходимого кода. Однако, если вам это удобно, вы можете следовать этим инструкциям, чтобы получить значки Font Awesome на своем сайте.

Установка Font Awesome Icons вручную

Самое первое, что вам нужно сделать, это зайти на сайт Font Awesome. Здесь, нажмите на кнопку « Начать использовать бесплатно». Они предлагают платные планы для людей, которые имеют сайты с большим трафиком и нуждаются в корпоративном решении, но широкая публика может получить бесплатную версию. Вы получаете 1500 иконок бесплатно и более 5000 вариантов в плане Pro.

Следующий шаг – просто скопировать / вставить. Но вы должны убедиться, что вы выделили опцию webfont, как мы обсуждали ранее.

В большинстве тем есть место для автоматической вставки кода в

сайта. Например, в случае с Divi вы должны войти в Параметры темы – Интеграция и вставить этот код в поле с надписью Добавить код в заголовок вашего блога .

Когда вы нажмете «Сохранить», вы можете начать добавлять любые значки, которые вы хотите, как мы делали выше. Только у вас нет доступа к шорткоду при этом.

Если ваша тема не поддерживает интеграцию кода

Если вы не можете найти такое место в своей теме, это также легко сделать вручную. Однако для этого вам придется копаться в файлах Core вашей темы, но это очень быстрое копирование / вставка, и (как правило) это довольно безопасно. Перейдите в Внешний вид – Редактор на панели инструментов WP и найдите файл header.php.

Найдите строку, в которой написано </head>, и перед ней вам нужно вставить тот же код из Font Awesome. Нажмите Обновить файл, и вы сможете сразу начать использовать значки FA. 

Дополнительные параметры для установки

И если у вас есть другие, более конкретные потребности в Font Awesome, они предлагают множество способов получить доступ к библиотеке. От установок NPM и Yarn до интеграции Sketch и React у них есть масса опций, если они вам нужны не только для WordPress.

Styling Font Awesome Icons

Теперь, когда они у вас установлены, пришло время сделать иконки всплывающими. Вы можете сделать это с помощью CSS, потому что каждая из иконок управляется классом CSS. Два наиболее часто используемых стиля – это цвет и размер . Вы можете включить CSS-стили в свои таблицы стилей или сделать их встроенными. В общем, вы можете захотеть использовать встроенные стили, потому что подобные иконки не являются универсальными для всего сайта.

На сайте Font Awesome есть примеры того, как это сделать. Они показывают размеры, используя свою иконку igloo и дополнительный класс, такой как fa-xs  или fa-xl  или fa-2x для определенного размера.

Кроме того, если вам нужно, чтобы значок был относительно определенного размера и абсолютные значения не работали, вы можете поместить его в собственный

, чтобы он работал в рамках ваших ограничений.

Завершение

И это все! Круто, верно? Независимо от того, используете ли вы плагин Font Awesome WordPress или вставляете код вручную, для запуска  сайта достаточно нескольких шагов. Font Awesome популярен по определенной причине, и отчасти это объясняется простотой использования. 

Какой ваш любимый способ использовать иконки Font Awesome?

Статья с изображением любезно предоставлена ​​Font Awesome

Как исправить значки Font Awesome, отображаемые как окно?

В веб-разработке обычно используются значки шрифтов в формате SVG вместо ввода символов с помощью escape-символов. Например, значки Font Awesome наиболее популярны из-за масштабируемости значков без потери качества. Однако, если вы не реализуете должным образом значки шрифтов, они будут отображаться в виде поля. Если у вас возникли проблемы со значками шрифтов, узнайте, как их исправить.

Использование иконок Font Awesome на веб-сайте

Есть два способа использовать значки шрифтов на вашем сайте. Один — использовать в теге HTML, а другой — использовать псевдоклассы CSS. В обоих методах вы должны связать исходный шрифт awesome CSS и разместить файлы шрифтов на своем сервере, чтобы к значкам можно было применить правильные стили. Ниже приведен пример использования font awesome в HTML:

Проверьте эту статью с официального сайта на как использовать иконки шрифтов на вашем сайте. Если при загрузке чего-то не хватает, вы увидите поле, как показано ниже, вместо значка.

Почему иконки Font Awesome отображаются в виде прямоугольника?

Чтобы вставить значок шрифта на свой сайт, необходимо следующее:

• Разместите шрифты на своем сервере
• Ссылка на правильный шрифт классная версия CSS
• Нет конфликта со старой и новой версиями на одном сайте
• Проверьте правильность семейства шрифтов
• Используйте правильный класс CSS
• Проверить толщину шрифта
• Проверить код содержимого CSS

Давайте рассмотрим точку легкости подробнее.

1. Разместите шрифты на своем сервере

Чтобы использовать font awesome на своем веб-сайте, необходимо разместить файлы шрифтов в том же каталоге. Все гарнитуры веб-шрифтов должны быть доступны в папке «/ webfonts» и указаны в CSS, расположенном в папке «/ css».

В большинстве случаев тема или плагин, которые вы используете, установят все необходимые файлы CSS и шрифтов на ваш сервер. Это так, особенно когда вы используете WordPress для своего сайта.

2. Ссылка на правильную версию CSS

Font awesome был доступен бесплатно до версии 4.70. Однако, начиная с версии 5.0, доступны как бесплатная, так и профессиональная версии. Хотя версия 4.70 устарела, большинство бесплатных плагинов и тем по-прежнему используют 4.70 из-за унифицированного класса CSS и простоты использования. Однако в версии 5.0 есть бренды и твердые стили для бесплатных пользователей, и вы можете использовать all.css для включения обоих стилей.

Вы можете либо зарегистрироваться на сайте font awesome, чтобы получить комплект CDN, либо использовать Файлы CDN доступны в Cloudflare.

3. Конфликтующие версии CSS

Одна из проблем, с которыми мы столкнулись с сайтом WordPress, заключается в том, что плагин использовал версию 4.70, а тема — 5.0. Это вызывало конфликт из-за несовместимости классов CSS и кодов содержимого. Поэтому обязательно используйте последнюю версию 5.0 с правильным исходным файлом CSS на своем сайте.

4. Используйте правильное семейство шрифтов.

Чтобы использовать отличный шрифт с CSS, вы должны использовать правильное семейство шрифтов. Ниже представлен код CSS, использованный в версии 4.70.

.li: before {
содержание: ” 00A3 ″; семейство шрифтов: «FontAwesome»; font-weight: нормальный; }

Однако в версии 5.0 вместо значка будет отображаться поле. вы должны использовать следующий CSS с версией 5.0 бесплатной версии.

.li: before {
содержание: ” 00A3 ″; семейство шрифтов: «Font Awesome 5 Бесплатно«; font-weight: 900; }

Поэтому убедитесь, что вы используете правильное семейство шрифтов «Font Awesome 5 Free» в CSS. Кроме того, если вы используете значки социальных сетей, семейство шрифтов должно быть «Font Awesome 5 Brands». Это два семейства шрифтов, доступные для бесплатных пользователей.

5. Используйте правильный префикс стиля CSS.

Другая проблема заключается в том, что в версии 5.0 классы CSS отличаются от предыдущих версий. В версии 4.7 вы можете использовать префикс стиля fa, как показано ниже:

Однако это не будет работать с версией 5.0 и новее. Префикс стиля fa устарел, и вы должны использовать fas для твердых значков и fab для значков социального брендинга, таких как Facebook.

6. Проверьте толщину шрифта.

Font awesome версии 5.0 не поддерживает общее объявление «font-weight: normal» в CSS. Для отображения значка следует указать определенный вес шрифта.

7. Проверьте код содержимого CSS.

Последний пункт — убедиться, что код содержимого, используемый в CSS, правильный. Вы должны использовать один из доступных кодов из шрифт отличный сайт в псевдоэлементе CSS. Кроме того, убедитесь, что используется код в формате « f00d»; чтобы значок отображался правильно.

Резюме

Ниже приведена сводная информация о семействе шрифтов, толщине шрифта, префиксе стиля и стилях, доступных для бесплатных и профессиональных пользователей. Вы должны убедиться, что все это правильно, чтобы вместо окна отображался значок.

Иконки веб-приложений Font Awesome

❮ Назад Далее ❯

В таблице ниже показаны все значки веб-приложений Font Awesome:

Значок	Описание	Пример
	fa fa-адресная книга	Попробуйте
	fa fa-адресная книга-o	Попробуйте
	fa fa-адресная-карта	Попробуйте
	fa fa-адресная-карта-o	Попробуйте
	фа фа-регулировка	Попробуйте
	fa fa-американский язык жестов	Попробуйте
	fa fa-анкер	Попробуйте
	fa fa-архив	Попробуйте
	fa fa-область-диаграмма	Попробуйте
	fa fa-стрелы	Попробуйте
	фа фа-стрелки-ч	Попробуйте
	фа фа-стрелки-в	Попробуйте
	fa fa-asl-перевод	Попробуйте
	fa fa-вспомогательные слуховые системы	Попробуйте
	fa fa-звездочка	Попробуйте
	фа фа-ат	Попробуйте
	fa fa-автомобиль	Попробуйте
	fa fa-аудио-описание	Попробуйте
	fa fa-весы-весы	Попробуйте
	фа фа-бан	Попробуйте
	фа фа-банк	Попробуйте
	fa fa-гистограмма	Попробуйте
	fa fa-гистограмма-o	Попробуйте
	fa fa-штрих-код	Попробуйте
	fa fa-bars	Попробуйте
	fa fa-ванна	Попробуйте
	fa fa-ванна	Попробуйте
	fa fa-батарея-0	Попробуйте
	fa fa-батарея-1	Попробуйте
	fa fa-батарея-2	Попробуйте
	fa fa-батарея-3	Попробуйте
	fa fa-батарея-4	Попробуйте
	fa fa-батарея пуста	Попробуйте
	fa fa-полный заряд батареи	Попробуйте
	fa fa-половина батареи	Попробуйте
	fa fa-батарея-четверть	Попробуйте
	fa fa-батарея-три четверти	Попробуйте
	fa fa-кровать	Попробуйте
	фа фа пиво	Попробуйте
	фа фа колокольчик	Попробуйте
	фа фа-белл-о	Попробуйте
	fa fa-колокольчик-косая черта	Попробуйте
	fa fa-bell-slash-o	Попробуйте
	fa fa-велосипед	Попробуйте
	fa fa-бинокль	Попробуйте
	fa fa-праздничный торт	Попробуйте
	fa fa-слепой	Попробуйте
	fa fa-болт	Попробуйте
	фа фа-бомба	Попробуйте
	фа фа-книга	Попробуйте
	fa fa-закладка	Попробуйте
	фа фа-закладка-о	Попробуйте
	fa fa-брайль	Попробуйте
	fa fa-портфель	Попробуйте
	fa fa-жук	Попробуйте
	fa fa-здание	Попробуйте
	fa fa-building-o	Попробуйте
	фа фа мегафон	Попробуйте
	fa fa-яблочко	Попробуйте
	фа фа-автобус	Попробуйте
	fa fa-кабина	Попробуйте
	fa fa-калькулятор	Попробуйте
	fa fa-календарь	Попробуйте
	фа фа-календарь-о	Попробуйте
	fa fa-календарь-check-o	Попробуйте
	fa fa-календарь-минус-o	Попробуйте
	fa fa-календарь-плюс-o	Попробуйте
	fa fa-календарь-раз-о	Попробуйте
	fa fa-камера	Попробуйте
	fa fa-камера-ретро	Попробуйте
	fa fa-car	Попробуйте
	fa fa-care-square-o-down	Попробуйте
	fa fa-caret-square-o-left	Попробуйте
	fa fa-caret-square-o-right	Попробуйте
	fa fa-caret-square-o-up	Попробуйте
	fa fa-cart-arrow-down	Попробуйте
	fa fa-cart-plus	Попробуйте
	fa fa-cc	Попробуйте
	fa fa-сертификат	Попробуйте
	фа фа-чек	Попробуйте
	fa fa-check-circle	Попробуйте
	fa fa-check-circle-o	Попробуйте
	fa fa-check-square	Попробуйте
	fa fa-check-square-o	Попробуйте
	fa fa-ребенок	Попробуйте
	fa fa-круг	Попробуйте
	fa fa-circle-o	Попробуйте
	fa fa-круглая-о-выемка	Попробуйте
	fa fa-круглая тонкая	Попробуйте
	фа фа-часы-о	Попробуйте
	fa fa-клон	Попробуйте
	фа фа-закрыть	Попробуйте
	фа фа-облако	Попробуйте
	fa fa-cloud-download	Попробуйте
	fa fa-cloud-upload	Попробуйте
	fa fa-код	Попробуйте
	fa fa-кодовая вилка	Попробуйте
	fa fa-кофе	Попробуйте
	fa fa-cog	Попробуйте
	fa fa-cogs	Попробуйте
	fa fa-комментарий	Попробуйте
	fa fa-comment-o	Попробуйте
	fa fa-комментарии	Попробуйте
	fa fa-comments-o	Попробуйте
	fa fa-комментирование	Попробуйте
	fa fa-commenting-o	Попробуйте
	fa fa-компас	Попробуйте
	fa fa-авторское право	Попробуйте
	fa fa-кредитная карта	Попробуйте
	fa fa-кредитная карта-alt	Попробуйте
	fa fa-creative-commons	Попробуйте
	fa fa-урожай	Попробуйте
	fa fa-перекрестие	Попробуйте
	fa fa-cube	Попробуйте
	fa fa-кубы	Попробуйте
	fa fa-столовые приборы	Попробуйте
	fa fa-приборная панель	Попробуйте
	fa fa-база данных	Попробуйте
	fa fa-глухой	Попробуйте
	fa fa-глухота	Попробуйте
	fa fa-настольный	Попробуйте
	fa fa-ромб	Попробуйте
	fa fa-dot-circle-o	Попробуйте
	fa fa-скачать	Попробуйте
	fa fa-водительские права	Попробуйте
	fa fa-водительская лицензия-o	Попробуйте
	fa fa-edit	Попробуйте
	fa fa-многоточие-h	Попробуйте
	fa fa-многоточие-v	Попробуйте
	fa fa-конверт	Попробуйте
	fa fa-конверт-o	Попробуйте
	fa fa-конверт-открытый	Попробуйте
	fa fa-конверт-открытый-o	Попробуйте
	fa fa-конверт-квадрат	Попробуйте
	fa fa-ластик	Попробуйте
	fa fa-обмен	Попробуйте
	fa fa-восклицательный знак	Попробуйте
	fa fa-восклицательный круг	Попробуйте
	fa fa-восклицательный треугольник	Попробуйте
	fa fa-внешняя ссылка	Попробуйте
	fa fa-external-link-square	Попробуйте
	фа фа-глаз	Попробуйте
	фа фа-глаз-косая черта	Попробуйте
	fa fa-пипетка	Попробуйте
	фа факс	Попробуйте
	фа фа-женщина	Попробуйте
	fa fa-истребитель	Попробуйте
	fa fa-file-archive-o	Попробуйте
	фа фа-файл-аудио-о	Попробуйте
	fa fa-file-code-o	Попробуйте
	fa fa-file-excel-o	Попробуйте
	fa fa-file-image-o	Попробуйте
	fa fa-file-movie-o	Попробуйте
	fa fa-file-pdf-o	Попробуйте
	fa fa-file-photo-o	Попробуйте
	fa fa-file-picture-o	Попробуйте
	fa fa-file-powerpoint-o	Попробуйте
	фа фа-файл-звук-о	Попробуйте
	fa fa-file-video-o	Попробуйте
	фа фа-файл-слово-о	Попробуйте
	fa fa-file-zip-o	Попробуйте
	fa fa-пленка	Попробуйте
	fa fa-фильтр	Попробуйте
	фа фа-огонь	Попробуйте
	fa fa-огнетушитель	Попробуйте
	fa fa-флаг	Попробуйте
	фа фа-флаг-клетка	Попробуйте
	фа фа-флаг-о	Попробуйте
	фа фа-вспышка	Попробуйте
	фа фляга	Попробуйте
	fa fa-папка	Попробуйте
	fa fa-folder-o	Попробуйте
	fa fa-папка-открыть	Попробуйте
	fa fa-folder-open-o	Попробуйте
	fa fa-frown-o	Попробуйте
	фа фа-футбол-о	Попробуйте
	fa fa-геймпад	Попробуйте
	fa fa-молоток	Попробуйте
	фа фа-шестерня	Попробуйте
	fa fa-шестерни	Попробуйте
	fa fa-бесполый	Попробуйте
	fa fa-подарок	Попробуйте
	fa fa-стекло	Попробуйте
	фа фа-глобус	Попробуйте
	fa fa-выпускной колпачок	Попробуйте
	fa fa-группа	Попробуйте
	fa fa-слабослышащий	Попробуйте
	fa fa-hdd-o	Попробуйте
	фа фа-рукопожатие-о	Попробуйте
	fa fa-хэштег	Попробуйте
	fa fa-наушники	Попробуйте
	фа фа-сердце	Попробуйте
	фа фа-сердце-о	Попробуйте
	фа фа-сердцебиение	Попробуйте
	fa fa-история	Попробуйте
	фа фа-дом	Попробуйте
	фа фа-отель	Попробуйте
	fa fa-песочные часы	Попробуйте
	фа фа-песочные часы-1	Попробуйте
	fa fa-песочные часы-2	Попробуйте
	фа фа-песочные часы-3	Попробуйте
	fa fa-песочные часы-конец	Попробуйте
	fa fa-песочные часы-половина	Попробуйте
	фа фа-песочные часы-о	Попробуйте
	фа фа-песочные часы-старт	Попробуйте
	fa fa-i-курсор	Попробуйте
	fa fa-id-значок	Попробуйте
	fa fa-id-карта	Попробуйте
	fa fa-id-card-o	Попробуйте
	fa fa-image	Попробуйте
	fa fa-inbox	Попробуйте
	fa fa-промышленность	Попробуйте
	fa fa-info	Попробуйте
	fa fa-info-circle	Попробуйте
	fa fa-учреждение	Попробуйте
	fa fa-ключ	Попробуйте
	fa fa-клавиатура-o	Попробуйте
	фа фа-язык	Попробуйте
	fa fa-ноутбук	Попробуйте
	fa fa-лист	Попробуйте
	fa fa-legal	Попробуйте
	фа фа-лимон-о	Попробуйте
	fa fa-уровень вниз	Попробуйте
	fa fa-повышение уровня	Попробуйте
	фа фа спасательный круг	Попробуйте
	fa спасательный круг fa	Попробуйте
	fa fa-спасательный круг	Попробуйте
	fa спасательный круг	Попробуйте
	fa fa-lightbulb-o	Попробуйте
	fa fa-линейная диаграмма	Попробуйте
	fa fa-расположение-стрелка	Попробуйте
	fa fa-замок	Попробуйте
	fa fa-слабое зрение	Попробуйте
	фа фа-магия	Попробуйте
	fa fa-магнит	Попробуйте
	fa fa-mail-forward	Попробуйте
	fa fa-mail-ответ	Попробуйте
	fa fa-mail-ответить всем	Попробуйте
	fa fa-male	Попробуйте
	фа фа-карта	Попробуйте
	fa fa-map-o	Попробуйте
	fa fa-map-pin	Попробуйте
	fa fa-карта-знаки	Попробуйте
	fa fa-карта-маркер	Попробуйте
	фа фа-ме-о	Попробуйте
	fa fa-микрочип	Попробуйте
	fa fa-микрофон	Попробуйте
	fa fa-микрофон-косая черта	Попробуйте
	фа фа-минус	Попробуйте
	fa fa-минус-круг	Попробуйте
	fa fa-минус-квадрат	Попробуйте
	fa fa-minus-square-o	Попробуйте
	fa fa-мобильный	Попробуйте
	fa fa-мобильный телефон	Попробуйте
	фа фа-деньги	Попробуйте
	фа фа-мун-о	Попробуйте
	fa fa-строительный раствор	Попробуйте
	fa fa-мотоцикл	Попробуйте
	fa fa-указатель мыши	Попробуйте
	фа фа-музыка	Попробуйте
	fa fa-navicon	Попробуйте
	фа фа-газета-о	Попробуйте
	fa fa-группа объектов	Попробуйте
	fa fa-объект-разгруппировать	Попробуйте
	fa fa-кисть	Попробуйте
	fa fa-бумажный самолетик	Попробуйте
	фа фа-бумажный самолет-о	Попробуйте
	фа фа-лапа	Попробуйте
	fa fa-карандаш	Попробуйте
	fa fa-карандаш-квадрат	Попробуйте
	fa fa-карандаш-квадрат-o	Попробуйте
	fa fa-процент	Попробуйте
	fa fa-телефон	Попробуйте
	фа фа-телефон-квадрат	Попробуйте
	fa fa-фото	Попробуйте
	fa fa-picture-o	Попробуйте
	фа круговая диаграмма	Попробуйте
	фа фа самолет	Попробуйте
	fa fa-штекер	Попробуйте
	фа фа-плюс	Попробуйте
	fa fa-plus-circle	Попробуйте
	fa fa-plus-квадрат	Попробуйте
	fa fa-plus-square-o	Попробуйте
	fa fa-подкаст	Попробуйте
	fa fa-выключение	Попробуйте
	fa fa-print	Попробуйте
	fa fa-головоломка	Попробуйте
	fa fa-qrcode	Попробуйте
	fa fa-вопрос	Попробуйте
	fa fa-вопрос-круг	Попробуйте
	фа фа-вопрос-круг-о	Попробуйте
	fa fa-цитата слева	Попробуйте
	fa fa-кавычки справа	Попробуйте
	fa fa-случайный	Попробуйте
	fa fa-утилизация	Попробуйте
	фа фа-обновление	Попробуйте
	fa зарегистрированный	Попробуйте
	fa fa-удалить	Попробуйте
	fa fa-перезаказ	Попробуйте
	fa fa-ответ	Попробуйте
	fa fa-ответить всем	Попробуйте
	fa fa-ретвитнуть	Попробуйте
	fa fa-дорога	Попробуйте
	фа фа-ракета	Попробуйте
	фа фа-рсс	Попробуйте
	fa fa-rss-square	Попробуйте
	фа фа-с15	Попробуйте
	fa fa-поиск	Попробуйте
	fa fa-поиск-минус	Попробуйте
	фа фа-поиск-плюс	Попробуйте
	фа фа-отправить	Попробуйте
	fa fa-send-o	Попробуйте
	fa fa-сервер	Попробуйте
	fa fa-поделиться	Попробуйте
	fa fa-share-alt	Попробуйте
	fa fa-share-alt-square	Попробуйте
	fa fa-share-square	Попробуйте
	fa fa-share-square-o	Попробуйте
	защитный экран	Попробуйте
	фа фа-корабль	Попробуйте
	fa fa-сумка для покупок	Попробуйте
	fa fa-корзина для покупок	Попробуйте
	fa fa-тележка для покупок	Попробуйте
	fa fa-душ	Попробуйте
	fa fa-вход	Попробуйте
	fa fa-выход	Попробуйте
	фа фа-язык жестов	Попробуйте
	fa fa-сигнал	Попробуйте
	fa fa-подпись	Попробуйте
	фа фа-карта сайта	Попробуйте
	fa fa-слайдеры	Попробуйте
	фа фа-улыбка-о	Попробуйте
	фа фа-снежинка-о	Попробуйте
	fa fa-футбольный мяч-o	Попробуйте
	fa fa-сорт	Попробуйте
	fa fa-sort-alpha-asc	Попробуйте
	fa fa-sort-alpha-desc	Попробуйте
	фа фа-сортировка-сумма-по возрастанию	Попробуйте
	fa fa-sort-sum-desc	Попробуйте
	fa fa-sort-asc	Попробуйте
	fa fa-sort-desc	Попробуйте
	фа фа-сортировка	Попробуйте
	fa fa-sort-numeric-asc	Попробуйте
	fa fa-sort-numeric-desc	Попробуйте
	fa fa-сортировка	Попробуйте
	fa fa-космический шаттл	Попробуйте
	fa fa-спиннер	Попробуйте
	fa fa-ложка	Попробуйте
	fa fa-квадрат	Попробуйте
	fa fa-square-o	Попробуйте
	фа фа-звезда	Попробуйте
	фа фа-звезда-половина	Попробуйте
	фа фа-звезда-полупустой	Попробуйте
	fa fa-star-half-full	Попробуйте
	fa fa-star-half-o	Попробуйте
	фа фа-стар-о	Попробуйте
	fa fa-заметка	Попробуйте
	fa fa-sticky-note-o	Попробуйте
	фа фа-вид на улицу	Попробуйте
	fa fa-чемодан	Попробуйте
	фа фа-солнце	Попробуйте
	fa fa-поддержка	Попробуйте
	fa fa-таблетка	Попробуйте
	fa fa-тахометр	Попробуйте
	fa fa-tag	Попробуйте
	fa теги fa	Попробуйте
	fa fa-задачи	Попробуйте
	фа фа-такси	Попробуйте
	fa fa-телевидение	Попробуйте
	fa fa-терминал	Попробуйте
	fa fa-термометр	Попробуйте
	fa fa-термометр-0	Попробуйте
	fa fa-термометр-1	Попробуйте
	fa fa-термометр-2	Попробуйте
	fa fa-термометр-3	Попробуйте
	fa fa-термометр-4	Попробуйте
	fa fa-термометр-пустой	Попробуйте
	fa fa-термометр-полный	Попробуйте
	fa fa-термометр-половинка	Попробуйте
	fa fa-термометр-четверть	Попробуйте
	fa fa-термометр-три четверти	Попробуйте
	фа фа-кнопка	Попробуйте
	fa fa-палец вниз	Попробуйте
	fa fa-thumbs-o-up	Попробуйте
	fa fa-большой палец вверх	Попробуйте
	fa fa-билет	Попробуйте
	фа фа-раз	Попробуйте
	fa fa-times-circle	Попробуйте
	fa fa-times-circle-o	Попробуйте
	fa fa-time-прямоугольник	Попробуйте
	фа фа-раз-прямоугольник-о	Попробуйте
	fa fa-оттенок	Попробуйте
	fa fa-переключатель вниз	Попробуйте
	fa fa-переключатель влево	Попробуйте
	fa fa-toggle-right	Попробуйте
	fa fa-переключатель	Попробуйте
	fa fa-переключатель	Попробуйте
	fa fa-переключатель	Попробуйте
	fa fa-торговая марка	Попробуйте
	фа фа-мусор	Попробуйте
	фа фа-мусор-о	Попробуйте
	фа фа-дерево	Попробуйте
	fa fa-трофей	Попробуйте
	fa fa-грузовик	Попробуйте
	fa fa-tty	Попробуйте
	фа фа-тв	Попробуйте
	fa fa-зонт	Попробуйте
	fa fa-универсальный доступ	Попробуйте
	фа фа-университет	Попробуйте
	fa fa-разблокировать	Попробуйте
	fa fa-unlock-alt	Попробуйте
	fa fa-несортированный	Попробуйте
	fa fa-upload	Попробуйте
	fa fa-пользователь	Попробуйте
	fa fa-user-circle	Попробуйте
	fa fa-user-circle-o	Попробуйте
	fa fa-user-o	Попробуйте
	fa fa-user-plus	Попробуйте
	fa fa-user-secret	Попробуйте
	fa fa-user-times	Попробуйте
	fa fa-пользователи	Попробуйте
	fa fa-vcard	Попробуйте
	fa fa-vcard-o	Попробуйте
	fa fa-видеокамера	Попробуйте
	fa fa-громкость-телефон	Попробуйте
	fa fa-уменьшение громкости	Попробуйте
	fa fa-громкость-выкл.	Попробуйте
	fa fa-увеличение громкости	Попробуйте
	fa fa-предупреждение	Попробуйте
	fa fa-коляска	Попробуйте
	fa fa-инвалидная коляска-alt	Попробуйте
	fa fa-окно-закрыть	Попробуйте
	fa fa-window-close-o	Попробуйте
	fa fa-окно-максимизировать	Попробуйте
	fa fa-окно-свернуть	Попробуйте
	fa fa-восстановление окна	Попробуйте
	фа фа-вай-фай	Попробуйте
	фа ключ фа	Попробуйте

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

9003 300 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Иконки Font Awesome — GrowthDot

Выбирайте из более чем 600 красивых иконок от Font Awesome.

О Font Awesome Icons

Font Awesome — это набор из более чем 600 векторных иконок, которые можно использовать для самых разных целей. Каждый клиент, решивший использовать наши темы Zendesk, получит их абсолютно бесплатно.

А поскольку это векторная графика, это означает, что они отлично масштабируются и будут выглядеть потрясающе практически на любом размере экрана. Вы также можете настроить значки. Будь то размер, тень, цвет или позиционирование, вы можете сделать это в режиме реального времени благодаря мощи CSS.

Почему лучше выбрать нас!

Иконки для всех

У нас есть более 16 групп иконок, каждая из которых упакована до краев.

Бесплатно

Вы платите абсолютно $0 за использование наших иконок.

Масштабируемое качество

Наши иконки сохранят свое качество, даже если они будут увеличены на большом экране. Каждый уголок четкий, каждый цветовой элемент насыщенный.

Основные функции Font Awesome

Различные размеры

Масштабируемые векторные изображения элегантны и привлекательны независимо от их размера.

Анимированные иконки

Простота часто дополняется анимацией, и это именно то, что мы имеем.

Иконы стилизованные

От окаймленного, вытянутого, скрученного до перевернутого и сложенного. Вы называете это, мы доставляем это!

Просмотреть все темы Zendesk

Узнайте о других функциях

Интернет

Адаптивные темы

Все темы нашего справочного центра Zendesk будут работать практически на всех устройствах.

перевести

Многоязычная поддержка

Локализуйте свой контент, чтобы охватить клиентов по всему миру, чтобы обеспечить единое обслуживание клиентов.

format_paint

Макеты для всех

Сделайте свой корпоративный стиль ярче с нашими уникальными дизайнами и макетами.

группа

Чем мы отличаемся

Zendesk доверяет нам, мы обслуживаем компании со всего мира, включая США и ЕС.

help

Поддержка всех функций

Мы знаем все тонкости Zendesk, а это означает, что наши темы поддерживают даже самые маленькие функции.

язык

Все поддерживаемые браузеры

Будь то Firefox, Chrome, IE11 или Safari и Edge, наши темы будут корректно отображаться в каждом из них.

настроение

Без риска

Мы заботимся о наших клиентах и ​​гарантируем, что у вас не будет абсолютно никаких поводов для беспокойства.

compare_arrows

Сравните нас

Вы можете сравнить с нами кого угодно, чтобы увидеть, что отличает нас и почему работать с нами так выгодно.

код

Код высшего качества

Нам не нравится спагетти-код, поэтому все наши темы имеют чистый и легко читаемый код. С нами у вас не будет проблем с добавлением дополнительных функций.

filter_hdr

Удивительные значки в комплекте

Каждая тема поставляется с набором значков (более 600), которые вы можете использовать прямо из коробки. Бесплатно, навсегда.

виджеты

Дополнительные компоненты

Наши темы можно легко модифицировать благодаря встроенным визуальным компонентам. Сделайте свою страницу высокой!

thumb_up

Пользовательские темы vs. Стандартные темы

Добавлены компоненты форматирования, улучшена читабельность, уникальные макеты, параметры настройки и многое другое!

Services for Zendesk Guide

сборка

Установка темы

Уделите время и внимание тому, что важно — вашим клиентам, — пока мы устанавливаем тему для вас.

color_lens

Брендинг темы

Быстро отредактируйте свою тему. Измените цвета, логотип и другие функции в соответствии с рекомендациями по брендингу.

settings_applications

Настройка темы

Хотите реализовать интересную идею? Сделайте это, заказав услугу персонализации. Вы можете запросить изменение любых элементов и макета страниц статьи.

электронная почта

Брендинг электронной почты

Сделайте свои электронные письма поддержки выделяющимися с помощью индивидуального дизайна электронной почты. Меняйте цвета, добавляйте собственный текст и делайте множество других настроек.

чат

Расширенная поддержка

Всякий раз, когда вам нужно изменить дизайн вашей темы, добавить новые элементы или улучшения, мы будем рядом, чтобы помочь вам.

cloud_upload

Обновление Copenhagen

Внесите любые изменения в стандартную тему Zendesk, чтобы она выглядела и ощущалась как ваш бренд.

Назначение

Мультибрендовая лицензия

Плати один раз, устанавливай несколько раз. Зачем платить за один и тот же товар для разных брендов, если можно сэкономить с лицензией?

settings_applications

Сервис, который вам понравится

Нам нравится создавать темы, и мы любим Zendesk. Наша миссия — делать наших клиентов счастливыми!

Один шаг до улучшения работы справочного центра

Выберите тему

Иконки Font Awesome — Advertising Media Plus

11 новых значков в версии 4.0

фа-руб

fa-рубль(псевдоним)

fa-рубль (псевдоним)

fa-pagelines

фа-стек-обмен

fa-стрелка-круг-о-право

fa-стрелка-круг-о-влево

fa-caret-square-o-left

fa-toggle-left (псевдоним)

fa-dot-circle-o

кресло-коляска

fa-vimeo-square

фа-попытка

фа-турецкая лира (псевдоним)

fa-plus-square-o

значки веб-приложений

фа-регулировка

фа-анкер

fa-архив

фа-стрелки

фа-стрелки-ч

fa-стрелки-v

фа-звездочка

фа-бан

фа-гистограмма-о

fa-штрих-код

фа-бары

Фа-пиво

фа-белл

фа-белл-о

Фа-болт

фа-книга

fa-закладка

фа-закладка-о

портфель fa

Фа-жук

Фа-здание-о

фа-рупор

фа-яблочко

фа-календарь

фа-календарь-о

fa-камера

fa-камера-ретро

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-сертификат

фа-чек

fa-check-circle

fa-check-circle-o

fa-check-square

fa-check-square-o

fa-круг

fa-circle-o

фа-часы-о

фа-облако

fa-cloud-скачать

fa-cloud-upload

фа-код

вилка fa-code

фа-кофе

fa-cog

зубчатые колеса

fa-комментарий

fa-comment-o

fa-комментарии

fa-комментарии-o

fa-компас

fa-кредитная карта

фа-кроп

fa-перекрестие

столовые приборы

fa-dashboard (псевдоним)

фа-рабочий стол

fa-dot-circle-o

fa-скачать

fa-edit (псевдоним)

фа-эллипсис-ч

fa-многоточие-v

фа-конверт

фа-конверт-о

ластик

обмен факсами

фа-восклицательный знак

фа-восклицательный круг

fa-восклицательный-треугольник

fa-внешняя ссылка

fa-внешняя ссылка-квадрат

фа-глаз

fa-eye-slash

фа-женщина

реактивный фа-истребитель

фа-пленка

Фа-фильтр

фа-огонь

огнетушитель фа

фа-флаг

фа-флаг-клетка

фа-флаг-о

fa-flash (псевдоним)

фляга

папка fa

фа-папка-о

fa-folder-open

fa-folder-open-o

fa-frown-o

фа-геймпад

фа-молоток

fa-gear (псевдоним)

fa-gears (псевдоним)

подарок

стекло

fa-globe

fa-group (псевдоним)

фа-жесткий-о

наушники fa

фа-сердце

фа-сердце-о

фа-дом

почтовый ящик

фа-инфо

fa-info-circle

фа-ключ

фа-клавиатура-о

фа-ноутбук

фа-лист

fa-legal (псевдоним)

фа-лимон-о

fa-уровень вниз

повышение уровня фа

фа-лампочка-о

fa-расположение-стрелка

фа-замок

фа-магия

фа-магнит

fa-mail-forward (псевдоним)

fa-mail-ответ (псевдоним)

fa-mail-ответить-всем

мужчина

фа-карта-маркер

фа-мех-о

fa-микрофон

fa-микрофон-слеш

фа-минус

fa-минус-круг

fa-минус-квадрат

фа-минус-квадрат-о

фа-мобайл

fa-мобильный телефон (псевдоним)

фа-деньги

фа-мун-о

фа-музыка

фа-карандаш

fa-карандаш-квадрат

fa-карандаш-квадрат-o

fa-телефон

fa-телефон-площадь

фа-картинка-о

фа-самолет

фа-плюс

fa-plus-circle

фа-плюс-квадрат

fa-plus-square-o

fa-выключение

фа-принт

fa-головоломка

fa-qrcode

fa-вопрос

fa-вопрос-круг

fa-quote-left

fa-кавычки справа

фа-случайный

фа-обновление

фа-ответ

fa-ответить всем

фа-ретвит

фа-роуд

фа-ракета

фа-рсс

fa-rss-square

фа-поиск

фа-поиск-минус

фа-поиск-плюс

фа-поделиться

fa-share-square

fa-share-square-o

защитный экран

fa-тележка для покупок

fa-вход

fa-выход

Фа-сигнал

карта сайта

фа-улыбка-о

Фа-сорт

fa-sort-alpha-asc

fa-sort-alpha-desc

фа-сортировка-сумма-по возрастанию

fa-сортировка-количество-описание

fa-sort-asc

fa-sort-desc

fa-sort-down (псевдоним)

fa-sort-numeric-asc

fa-sort-numeric-desc

fa-sort-up (псевдоним)

фа-спиннер

фа-квадрат

fa-square-o

фа-звезда

фа-звезда-половина

fa-star-half-empty (псевдоним)

fa-star-half-full (псевдоним)

fa-star-half-o

фа-стар-о

фа-индекс

фа-чемодан

фа-сун-о

фа-верхний индекс

планшет fa

тахометр

фа-тег

фа-теги

fa-задачи

фа-терминал

кнопка fa

fa-палец вниз

fa-thumbs-o-down

fa-thumbs-o-up

палец вверх

фа-билет

фа-раз

fa-times-circle

fa-times-circle-o

оттенок фа

fa-toggle-down (псевдоним)

fa-toggle-left (псевдоним)

fa-toggle-right (псевдоним)

fa-toggle-up (псевдоним)

фа-мусор-о

фа-трофей

fa-грузовик

фа-зонт

фа-разблокировка

фа-разблокировать-альт

fa-несортированный (псевдоним)

фа-загрузка

fa-пользователь

fa-пользователи

фа-видеокамера

fa-уменьшение громкости

fa-выкл. громкости

фа-увеличение громкости

fa-предупреждение (псевдоним)

кресло-коляска

гаечный ключ

значки управления формой

fa-check-square

fa-check-square-o

fa-круг

fa-circle-o

fa-dot-circle-o

fa-минус-квадрат

фа-минус-квадрат-о

фа-плюс-квадрат

fa-plus-square-o

фа-квадрат

fa-square-o

иконки валюты

fa-bitcoin (псевдоним)

фа-битк

fa-cny (псевдоним)

фа-доллар (псевдоним)

фа-евро

fa-евро (псевдоним)

фа-фунт

fa-inr

фа-йен

фа-крв

фа-деньги

fa-rmb (псевдоним)

fa-рубль (псевдоним)

фа-руб

фа-рубль (псевдоним)

фа-рупия (псевдоним)

фа-попытка

fa-turkish-lira (псевдоним)

фа-доллар США

фа-вон (псевдоним)

фа-йен (псевдоним)

значки текстового редактора

fa-align-center

фа-выравнивание-выравнивание

fa-align-left

fa-align-right

жирный

fa-chain (псевдоним)

обрыв цепи fa

fa-буфер обмена

fa-столбцы

фа-копия (псевдоним)

fa-cut (псевдоним)

fa-dedent (псевдоним)

ластик

fa-файл

фа-файл-о

фа-файл-текст

фа-файл-текст-о

фа-файлы-о

фа-дискета-о

fa-шрифт

отступ фа

курсив

Фа-линк

фа-список

фа-список-альт

фа-лист-ол

Фа-лист-ул

fa-outdent

фа-скрепка

fa-paste (псевдоним)

фа-повтор

fa-rotate-left (псевдоним)

fa-rotate-right (псевдоним)

fa-save (псевдоним)

ножницы fa

fa-перечеркнутый

фа-таблица

высота текста

fa-text-width

фа-й

фа-й-большой

фа-список

подчеркивание

фа-ундо

fa-unlink (псевдоним)

значки направления

fa-угол-двойной вниз

fa-угол-двойной левый

fa-угол-двойной-правый

двойной угол наклона

угол наклона вниз

fa-угол-левый

угол наклона вправо

угол наклона вверх

fa-стрелка-кружок-вниз

fa-стрелка-круг-влево

fa-стрелка-круг-о-вниз

fa-стрелка-круг-o-влево

fa-стрелка-круг-о-право

fa-стрелка-круг-о-вверх

fa-стрелка-кружок-вправо

fa-стрелка-круг вверх

fa-стрелка вниз

fa-стрелка-влево

фа-стрелка-вправо

fa-стрелка вверх

фа-стрелки

фа-стрелки-альт

фа-стрелки-ч

fa-стрелки-v

фа каре вниз

fa-каре-левый

фа-каре-право

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-care-up

fa-chevron-circle-down

fa-chevron-circle-left

fa-chevron-circle-right

fa-chevron-circle-up

фа-шеврон-вниз

фа-шеврон-левый

fa-chevron-right

fa-chevron-up

фа-рука-о-вниз

фа-рука-о-левая

фа-рука-о-право

фа-рука-вверх

fa-long-arrow-down

фа-длинная стрелка-влево

фа-длинная стрелка-вправо

фа-длинная стрелка вверх

fa-toggle-down (псевдоним)

fa-toggle-left (псевдоним)

fa-toggle-right (псевдоним)

fa-toggle-up (псевдоним)

значки видеоплеера

фа-стрелки-альт

фа-назад

фа-компресс

fa-eject

фа-расширить

фа-быстро-назад

фа-быстрая перемотка вперед

фа-вперед

фа-пауза

фа-плей

fa-play-circle

fa-play-circle-o

fa-шаг назад

фа-шаг вперед

фа-стоп

fa-youtube-play

значки брендов

фа-адн

фа-андроид

фа-яблоко

фа-битбакет

fa-битбакет-квадрат

fa-bitcoin (псевдоним)

фа-битк

fa-css3

фа-дриббл

fa-dropbox

fa-facebook

fa-facebook-square

fa-flickr

fa-foursquare

fa-github

fa-github-альт

fa-github-square

fa-gittip

фа-гугл-плюс

fa-google-plus-square

фа-html5

фа-инстаграм

fa-linkedin

fa-linkedin-square

фа-линукс

fa-maxcdn

fa-pagelines

fa-pinterest

fa-pinterest-квадрат

фа-ренрен

Фа-скайп

фа-стек-обмен

фа-переполнение стека

фа-трелло

fa-tumblr

fa-tumblr-квадрат

фа-твиттер

fa-twitter-square

fa-vimeo-square

фа-вк

фа-вейбо

окна

факс

fa-xing-square

фа-ютуб

fa-youtube-play

fa-youtube-квадрат

медицинские иконки

фа-скорая помощь

fa-h-квадрат

фа-госпиталь-о

фа-аптечка

фа-плюс-квадрат

fa-стетоскоп

fa-user-md

fa-инвалидная коляска

иконок Font Awesome | Унифицировать

45 новых иконок в версии 4.

72 Новые иконки в версии 4.1

Как создавать иконки Font Awesome с помощью CSS

Иконки на сайте удобны. Они предоставляют удобную визуальную информацию, предоставляя ссылки на формы электронной почты, номера телефонов, карты и многое другое.

Традиционно эти значки представляют собой графику, созданную с помощью программы графического дизайна, такой как Illustrator или Photoshop, или загруженную со многих бесплатных графических сайтов.

В этом уроке вы узнаете, как создавать значки, используя только CSS и шрифты. Это позволит вам редактировать всю вашу графику всего несколькими строками кода. Используя графику на основе шрифтов, вы также делаете свои страницы более легкими и отзывчивыми.

Самым популярным шрифтом для создания иконок на основе CSS является Font Awesome. Этот набор инструментов для шрифтов и значков был создан Дэйвом Ганди, первоначально для Twitter Bootstrap, и доступен бесплатно по лицензии SIL Open Font License 1.1, Creative Commons Attribution 4.0 и лицензии MIT.

Веб-сайт Font Awesome можно найти по адресу https://fontawesome.com/

Начало работы

Первым шагом является ссылка на шрифт с вашего веб-сайта. Вы можете сделать это, добавив следующую строку кода в любом месте тегов на HTML-странице или в шаблоне:

Это ссылка на шрифт на сайте Font Awesome. .

Альтернативой является загрузка файлов шрифтов, загрузка их на ваш веб-сайт и ссылка на эти файлы.

Вы можете скачать файлы в формате zip с домашней страницы Font Awesome:
https://fontawesome.com/

Разархивируйте файлы и загрузите их в папку на вашем сайте.

Затем вы ссылаетесь на них из раздела заголовка вашей страницы или шаблона, например:

Какие значки доступны?

Взгляните на обширную галерею Font Awesome, чтобы узнать, какие значки доступны.

Вот лишь некоторые из них:

Эта галерея доступна для поиска, так что вы можете легко найти подходящие значки.

Если, например, вы решите использовать значок «Домой», щелкните сам значок.

Затем вы увидите множество вариантов использования и простую в использовании строку кода, которую можно добавить на свою веб-страницу.

Ваш код будет выглядеть примерно так:





< ссылка href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">






И ваша веб-страница будет выглядеть так:

Стильный

Как и любой шрифт, вы можете использовать CSS для управления тем, как выглядит ваша иконка.

Вы можете изменить цвет и размер, добавив всего две строки в файл CSS.

.fa-home {
цвет: красный;
размер шрифта: 40px;
}

Теперь иконка выглядит так:

Если вы хотите, чтобы фон был больше похож на кнопку, вы также можете добавить его с помощью CSS.

.fa-home {
цвет: красный;
размер шрифта: 80 пикселей;
фон: #000;
отступ: 15 пикселей;
}

Теперь это выглядит так:

Если вы хотите, чтобы кнопка была круглой, то вы можете добавить радиус к фону, например:

.fa-home {
color: red;
размер шрифта: 30 пикселей;
фон: #000;
отступ: 15 пикселей;
радиус границы: 30 пикселей;
}

Теперь это выглядит так:

Вы можете экспериментировать с кодом, пока не получите кнопку, которая будет соответствовать внешнему виду вашего сайта.

Анимация

Чтобы анимировать иконки, вы можете просто добавить fa-spin в свой код, и ваша иконка начнет вращаться.

Добавьте этот код:


После этого графика начнет вращаться.

Точно так же вы можете поворачивать значки, добавляя такой фрагмент:

После применения этого фрагмента CSS к значку он будет выглядеть следующим образом:

Другие шрифты значков

Font Awesome — не единственный шрифт значков, который можно использовать. этим способом. Google Material Design предлагает более 900 иконок в качестве веб-шрифта.

Взгляните на галерею их коммуникационных значков:

Чтобы добавить шрифт на свой веб-сайт, добавьте ссылку на раздел, а затем выберите значок, который хотите использовать.

Следующий код:

главная поиск лицо

Будут созданы следующие значки:

Эти значки могут корректировать с помощью CSS.

Заключение

Существует множество иконок практически для любых целей. Иконочные шрифты упрощают добавление графики на ваш веб-сайт легким и отзывчивым способом.

Размер и цвет можно легко изменить при изменении стиля веб-сайта без необходимости возвращаться к графическим файлам.

Дополнительная литература

• Руководство для начинающих по Font Awesome
• Добавление значков Font Awesome в меню Drupal
• Как использовать Font Awesome в Photoshop Designs

Что дальше?

CSS расшифровывается как каскадные таблицы стилей и является частью вашего кода, который управляет макетом, внешним видом вашего веб-сайта.

Присоединяйтесь к нашему видеоклубу и начните учиться использовать возможности CSS для создания великолепных веб-сайтов.

• Либби Янг

Категории: Учебники по программированию

Tagged: добавить пользовательские шрифты, кодирование, создание значков шрифтов, css, отличный шрифт, значки шрифтов

Список классов значков Font Awesome

• 500px

  500px

• адресная книга

  адресная книга

• адресная книга-o

  адресная книга-o

• адресная карта

  адрес-карта

• адресная карта-o

  адрес-карта-o

• настроить

  настроить

• и

  и

• выравнивание по центру

  выравнивание по центру, текстовый редактор

• выравнивание по ширине

  выравнивание по ширине, текстовый редактор

• выравнивание по левому краю

  выравнивание по левому краю, текстовый редактор

• выровнять по правому краю

  выравнивание по правому краю, текстовый редактор

• Амазонка

  Амазонка

• скорая помощь

  скорая помощь, медицинская

• американский язык жестов

  американский сурдоперевод, доступность

• анкер

  анкер

• андроид

  андроид

• ангеллист

  ангеллист

• угол двойной вниз

  угол двойной вниз, стрелка

• угол двойной левый

  угол-двойной-левый, стрелка

• угол двойной правый

  угол-двойной-правый, стрелка

• сдвоенный угол

  угол-двойной вверх, стрелка

• наклонный вниз

  угол вниз, стрелка

• угол левый

  угол-левый, стрелка

• угол правый

  угол-вправо, стрелка

• под углом

  угол вверх, стрелка

• яблоко

  яблоко

• архив

  архив

• диаграмма с областями

  диаграмма с областями

• стрелка-круг вниз

  стрелка-кружок-вниз, стрелка

• стрелка-кружок-влево

  стрелка-круг-влево, стрелка

• стрелка-круг-о-вниз

  стрелка-круг-о-вниз, стрелка

• стрелка-круг-о-влево

  стрелка-круг-о-влево, стрелка

• стрелка-кружок-о-право

  стрелка-круг-о-право, стрелка

• стрелка-кружок-о-вверх

  стрелка-круг-о-вверх, стрелка

• стрелка-кружок-вправо

  стрелка-круг-вправо, стрелка

• стрелка-кружок вверх

  стрелка-кружок вверх, стрелка

• стрелка вниз

  стрелка вниз, стрелка

• стрелка влево

  стрелка влево, стрелка

• стрелка вправо

  стрелка вправо, стрелка

• стрелка вверх

  стрелка вверх, стрелка

• стрелки

  стрелы,

  стрелы

• стрелки-альт

  стрелки-альт, стрелка, игрок

• стрелки-ч

  стрелки-ч, стрелка

• стрелки-в

  стрелки-в, стрелка

• устный перевод

  asl-перевод, доступность

• вспомогательные слуховые системы

  вспомогательные слуховые системы, доступность

• звездочка

  звездочка

• на

  на

• аудио-описание

  аудио-описание, доступность

• автомобильный

  автомобиль, транспорт

• назад

  назад, игрок

• весы

  весы весы

• бан

  бан

• бэндкемп

  бэндкемп

• банк

  банк

• гистограмма

  гистограмма

• гистограмма-o

  гистограмма-o

• штрих-код

  штрих-код

• бар

  бара

• ванна

  ванна

• ванна

  ванна

• аккумулятор

  батарея

• аккумулятор-0

  батарея-0

• аккумулятор-1

  аккумулятор-1

• аккумулятор-2

  батарея-2

• аккумулятор-3

  аккумулятор-3

• аккумулятор-4

  батарея-4

• батарея разряжена

  батарея разряжена

• батарея заряжена

  батарея заряжена

• половинка аккумулятора

  половинка батареи

• аккумуляторная четверть

  батарея-четверть

• батарея-три четверти

  батарея-три четверти

• кровать

  кровать

• пиво

  пиво

• behance

  behance, социальные сети

• behance-square

  behance-square, социальные сети

• звонок

  звонок

• звонок

  звонок

• косая черта

  косая черта

• косая черта-о

  колокол-косая черта-о

• велосипед

  велосипед, транспорт

• бинокль

  бинокль

• праздничный торт

  праздничный торт

• битбакет

  битбакет

• битбакет-квадрат

  битбакет-квадрат

• биткойн

  биткойн, валюта

• черный галстук

  черный галстук

• жалюзи

  слепой, доступность

• Bluetooth

  блютуз

• блютуз-б

  блютуз-б

• полужирный

  полужирный, текстовый редактор

• болт

  болт

• бомба

  бомба

• книга

  книга

• закладка

  закладка

• закладка-o

  закладка-o

• шрифт Брайля

  шрифт Брайля, доступность

• портфель

  портфель

• БТЦ

  битк, валюта

• ошибка

  ошибка

• корпус

  корпус

• корпус-о

  корп. -о

• мегафон

  мегафон

• яблочко

  яблочко

• автобус

  автобус

  , транспорт

• покупкапродажа

  покупкапродажа

• кабина

  кабина, транспорт

• калькулятор

  калькулятор

• календарь

  календарь

• календарь-чек-о

  календарь-чек-о

• календарь-минус-о

  календарь-минус-о

• календарь-о

  календарь-o

• календарь-плюс-о

  календарь-плюс-о

• календарное время-o

  календарное время-o

• камера

  камера

• камера-ретро

  камера-ретро

• автомобиль

  автомобиль, транспорт

• каре вниз

  курсор вниз, стрелка

• каретка слева

  курсор влево, стрелка

• вправо

  курсор вправо, стрелка

• каре-квадрат-о-вниз

  каре-квадрат-o-вниз, стрелка

• знак вставки-квадрат-о-левый

  знак вставки-квадрат-о-влево, стрелка

• каре-квадрат-о-справа

  каре-квадрат-о-вправо, стрелка

• каре-квадрат-о-вверх

  каре-квадрат-о-вверх, стрелка

• уход

  перевод вверх, стрелка

• тележка со стрелкой вниз

  тележка-стрелка вниз

• тележка-плюс

  тележка плюс

• куб. см

  куб.см, оплата

• см-амекс

  cc-amex, оплата

• cc-diners-club

  cc-diners-club, оплата

• cc-обнаружить

  cc-discover, оплата

• куб.см-jcb

  cc-jcb, плата

• см-мастеркард

  cc-mastercard, оплата

• копия-paypal

  cc-paypal, оплата

• см-полоса

  cc-полоса, плата

• копия-виза

  cc-виза, оплата

• сертификат

  сертификат

• цепь

  9Цепочка 0002, текстовый редактор

• обрыв цепи

  обрыв цепи, текстовый редактор

• чек

  чек

• контрольный круг

  чек-кружок

• чек-круг-о

  чек-круг-о

• контрольный квадрат

  контрольный квадрат, форма

• чек-квадрат-о

  чек-кв-о, форма

• шеврон круг вниз

  шеврон-кружок-вниз, стрелка

• шеврон-круг-левый

  шеврон-круг-влево, стрелка

• шеврон-круг-справа

  шеврон-круг-вправо, стрелка

• шеврон-круг вверх

  шеврон-кружок вверх, стрелка

• шеврон вниз

  шеврон вниз, стрелка

• шеврон-левый

  шеврон-левый, стрелка

• шеврон-правый

  шеврон-вправо, стрелка

• шеврон вверх

  шеврон вверх, стрелка

• ребенок

  ребенок

• хром

  хром

• круг

  круг, форма

• круг-о

  круг-о, форма

• круглая насечка

  круглая насечка, вертушка

• тонкий круг

  круглый тонкий

• буфер обмена

  буфер обмена, текстовый редактор

• часы-о

  часы-o

• клон

  клон

• закрыть

  закрыть

• облако

  облако

• облачная загрузка

  облачная загрузка

• облачная загрузка

  облачная загрузка

• юаней

  юаня, валюта

• код

  код

• кодовая вилка

  кодовая вилка

• кодовая ручка

  кодовая ручка

• Кодиепье

  Кодиепье

• кофе

  кофе

• шестерня

  шестерня, кок

• шестерни

  винтики

• столбцы

  столбца, текстовый редактор

• комментарий

  комментарий

• комментарий-o

  комментарий-о

• комментарии

  комментарий

• комментирование-o

  комментирование-o

• комментариев

  комментариев

• комментарии-o

  комментария-о

• компас

  компас

• компресс

  компресс, плеер

• коннектдевелопмент

  подключитьразработать

• контактный

  контакт

• копия

  копия, текстовый редактор

• авторское право

  авторское право

• творческое сообщество

  творческое сообщество

• кредитная карта

  кредитная карта, оплата

• кредитная карта-альтернативный номер

  кредитная карта-альт, оплата

• урожай

  урожай

• перекрестие

  перекрестие

• CSS3

  CSS3

• куб

  куб

• куб

  куба

• вырез

  вырез, текстовый редактор

• столовые приборы

  столовые приборы

• приборная панель

  приборная панель

• приборная панель

  приборная панель

• база данных

  база данных

• глухой

  глухой, доступность

• глухота

  глухота, доступность

• дедент

  дедент, текстовый редактор

• вкусно

  вкусно, социальные сети

• настольный

  рабочий стол

• Девиантарт

  Девиантарт, социальные сети

• алмаз

  алмаз

• копать

  копать, социальные сети

• доллар

  доллара, валюта

• точка-круг-o

  точка-круг-о, форма

• скачать

  скачать

• капать

  дриббл, соцсети

• водительские права

  водительские права

• водительские права-o

  водительские права-o

• ящик

  ящик

• друпал

  друпал

• край

  край

• редактировать

  редактировать

• трансляция

  трансляция

• выброс

  выброс, игрок

• многоточие-h

  многоточие-h

• многоточие-v

  многоточие-v

• империя

  империя

• конверт

  конверт

• конверт-о

  конверт-о

• открытый конверт

  открытый конверт

• конверт-открытый-o

  конверт-открыт-o

• квадратный конверт

  конверт-квадрат

• окружающая среда

  окружающая среда

• ластик

  ластик, текстовый редактор

• этси

  этси

• евро

  евро, валюта

• евро

  евро, валюта

• обмен

  обмен

  , стрелка

• восклицательный знак

  восклицательный знак

• восклицательный круг

  восклицательный круг

• восклицательный треугольник

  восклицательный треугольник

• расширить

  расширить, игрок

• ускоренный SSL

  ускоренный SSL

• внешняя ссылка

  внешняя ссылка

• внешняя ссылка-квадрат

  внешняя ссылка-квадрат

• глаз

  глаз

• косая черта глаза

  косая черта глаза

• пипетка

  пипетка

• фа

  ФА

• фейсбук

  фейсбук, социальные сети

• фейсбук-ф

  facebook-f, социальные сети

• facebook-официальный

  facebook-официальный, социальные сети

• фейсбук-квадрат

  facebook-square, социальные сети

• быстрая перемотка назад

  быстрая перемотка назад, игрок

• ускоренная перемотка вперед

  перемотка вперед, игрок

• факс

  факс

• подача

  фид

• женский

  женщина

• истребитель

  истребитель, транспортный

• файл

  файл, текстовый редактор

• файл-архив-o

  файл-архив-o

• файл-аудио-о

  файл-аудио-о

• файл-код-о

  файл-код-о

• файл-превосход-о

  файл-Excel-о

• файл-изображение-o

  файл-изображение-o

• файл-фильм-o

  файл-фильм-o

• файл-о

  файл-о, текстовый редактор

• файл-pdf-o

  файл-pdf-o

• файл-фото-o

  файл-фото-o

• файл-изображение-o

  файл-картинка-o

• файл-Powerpoint-o

  файл-Powerpoint-o

• файл-звук-о

  файл-звук-о

• файл-текст

  файл-текст, текстовый редактор

• файл-текст-о

  файл-текст-o, текстовый редактор

• файл-видео-о

  файл-видео-о

• файл-слово-о

  файл-слово-о

• файл-zip-o

  файл-zip-о

• файлы-o

  файлы-о, текстовый редактор

• пленка

  пленка

• фильтр

  фильтр

• огонь

  огонь

• огнетушитель

  огнетушитель

• фаерфокс

  фаерфокс

• первый заказ

  первый заказ

• флаг

  флаг

• клетчатый

  флаг в клетку

• флаг-о

  флаг-о

• флэш-память

  вспышка

• колба

  колба

• flickr

  flickr, социальные сети

• гибкий диск

  дискета, текстовый редактор

• папка

  папка

• папка-o

  папка-o

• папка-открыть

  папка-открыть

• папка-открыть-o

  папка-открыть-o

• шрифт

  Шрифт

  , текстовый редактор

• потрясающий шрифт

  шрифт-потрясающий

• фонтиконы

  фонтиконы

• форт-крутой

  форт-круто

• форумчанин

  форумчанин

• вперед

  нападающий, игрок

• четыре квадрата

  четыре квадрата

• бесплатный код лагеря

  бесплатный код лагеря

• хмурый

  хмурится

• футбол-о

  футбол-о

• геймпад

  геймпад

• молоток

  молоток

• фунтов стерлингов

  фунта стерлингов, валюта

• гэ

  гэ

• шестерня

  Шестерня

  , кок

• шестерни

  шестерни

• бесполый

  без пола, пол

• карман

  карман

• гг

  гг, валюта

• гг-круг

  гг-круг, валюта

• подарок

  подарок

• гит

  гит

• гит-квадрат

  git-квадрат

• гитхаб

  гитхаб

• гитхаб-альт

  гитхаб-альт

• гитхаб-квадрат

  гитхаб-квадрат

• гитлаб

  гитлаб

• гиттип

  гиттип

• стекло

  стекло

• скольжение

  скольжение

• скольжение-г

  скольжение-g

• глобус

  глобус

• гугл

  гугл, социальные сети

• гугл-плюс

  гугл-плюс, социальные сети

• гугл-плюс-круг

  google-plus-circle, социальные сети

• Google-плюс-официальный

  google-plus-официальный, социальные сети

• гугл-плюс-квадрат

  google-plus-square, социальные сети

• гугл-кошелек

  гугл-кошелек, платеж

• выпускной колпачок

  выпускной колпачок

• бесплатный

  бесплатно

• грав

  грав

• группа

  группа

• h-квадрат

  h-квадрат, медицинский

• хакерские новости

  хакерские новости

• Ручной захват

  ручной захват

• ручная ящерица

  ручная ящерица-o

• ручной-опускной

  вручную-вниз

• ручной-левый

  рука-влево

• рука-вправо

  рука-вправо

• ручной

  рука вверх

• ручная бумага-o

  ручная бумага-o

• рука-мир-о

  рука-мир-о

• стрелочный указатель-o

  стрелочный указатель-o

• ручной рок-о

  ручная рок-о

• ручные ножницы-o

  ручные ножницы-o

• ручной спок

  ручной спок-о

• ручной стопор

  ручной стопор

• рукопожатие

  рукопожатие-о

• слабослышащие

  слабослышащие, доступность

• хэштег

  хэштег

• жесткий диск-о

  жесткий диск-о

• заголовок

  заголовок

  , текстовый редактор

• наушники

  наушники

• сердце

  сердце, медицинское

• сердце-о

  сердечный, медицинский

• сердцебиение

  сердцебиение, медицинский

• история

  история

• домашний

  дом

• больница-o

  стационар-о, медицинский

• гостиница

  гостиница

• песочные часы

  песочные часы

• песочные часы-1

  песочные часы-1

• песочные часы-2

  песочные часы-2

• песочные часы-3

  песочные часы-3

• конец песочных часов

  конец песочных часов

• половинка песочных часов

  половинка песочных часов

• песочные часы-o

  песочные часы-o

• начало песочных часов

  песочные часы-старт

• хоузз

  хоузз

• HTML5

  HTML5

• i-курсор

  i-курсор

• идентификационный значок

  удостоверение личности

• удостоверение личности

  удостоверение личности

• удостоверение личности

  удостоверение личности

• шекелей

  шекеля, валюта

• изображение

  изображение

• имдб

  имдб

• почтовый ящик

  почтовый ящик

• отступ

  Отступ

  , текстовый редактор

• промышленность

  промышленность

• информация

  информация

• информационный круг

  инфо-круг

• 9 руб. 0003

  рубля, валюта

• инстаграм

  инстаграм, социальные сети

• учреждение

  учреждение

• интернет-проводник

  интернет-проводник

• интерсекс

  интерсекс, пол

• ioxhost

  ioxhost

• курсив

  курсив, текстовый редактор

• джумла

  джумла

• иен

  иен, валюта

• jsfiddle

  jsfiddle

• ключ

  ключ

• клавиатура-o

  клавиатура-o

• вон

  вон, валюта

• язык

  язык

• ноутбук

  ноутбук

• ластфм

  ластфм

• lastfm-квадрат

  lastfm-квадрат

• лист

  лист

• линпаб

  линпаб

• юридический

  юридический

• лимон-о

  лимон-о

• понижение уровня

  понижение уровня

• повышение уровня

  повышение уровня

• спасательный круг

  спасательный круг

• спасательный круг

  спасательный круг

• спасательный круг

  спасательный круг

• спасательный круг

  спасательный круг

• лампочка-o

  лампочка-o

• линейная диаграмма

  линейный график

• ссылка

  ссылка, текстовый редактор

• ссылка на

  линкедин, социальные сети

• Linkin-Square

  linkedin-square, социальные сети

• линод

  линод

• линукс

  линукс

• список

  список, текстовый редактор

• список-альт

  список-альт, текстовый редактор

• список-ол

  список-ол, текстовый редактор

• список-ул

  list-ul, текстовый редактор

• расположение-стрелка

  местоположение-стрелка

• замок

  замок

• длинная стрелка вниз

  длинная стрелка-вниз, стрелка

• длинная стрелка-влево

  длинная стрелка-влево, стрелка

• длинная стрелка вправо

  длинная стрелка-вправо, стрелка

• длинная стрелка вверх

  длинная стрелка вверх, стрелка

• для слабовидящих

  плохое зрение, доступность

• магия

  магия

• магнит

  магнит

• переадресация почты

  переадресация почты

• ответ на почту

  ответ на почту

• ответ на почту-все

  почта-ответить всем

• мужской

  мужской

• карта

  карта

• маркер карты

  карта-маркер

• карта-о

  карта-о

• штифт карты

  карта-булавка

• карты-знаки

  карты-знаки

• марс

  марс, пол

• марс-двойной

  марс-двойной, пол

• марс-ход

  марс-инсульт, пол

• марс-ход-ч

  марс-штрих-ч, пол

• марс-ход-v

  марс-инсульт-v, пол

• макскдн

  макскдн

• средний путь

  средний путь

• средний

  средний

• аптечка

  аптечка, медицинская

• встреча

  встреча

• мех-о

  мех-о

• ртуть

  ртуть, пол

• микросхема

  микросхема

• микрофон

  микрофон

• микрофон-косая черта

  микрофон-косая черта

• минус

  минус

• минус-круг

  минус-круг

• минус квадрат

  минус-квадрат, форма

• минус-квадрат-о

  минус-квадрат-о, форма

• миксклауд

  миксклауд

• мобильный

  мобильный

• мобильный телефон

  мобильный телефон

• модкс

  модкс

• деньги

  деньги, валюта

• луна-о

  луна-о

• растворная плита

  растворная доска

• мотоцикл

  мотоцикл, транспорт

• указатель мыши

  указатель мыши

• музыка

  музыка

• навикон

  навикон

• средний

  средний род, пол

• газета-o

  газета-о

• группа объектов

  группа объектов

• объект-разгруппировать

  объект-разгруппировать

• одноклассники

  одноклассники

• одноклассники-квадрат

  Одноклассники-квадрат

• открытая тележка

  открытая тележка

• открытый идентификатор

  открытый идентификатор

• опера

  опера

• оптин-монстр

  оптин-монстр

• выступ

  аутдент, текстовый редактор

• стр. стр.

  страницы

  строки

• кисть

  кисть

• бумажный самолетик

  бумажный самолетик

• бумажный самолет-o

  бумажный самолет-o

• скрепка

  скрепка, текстовый редактор

• пункт

  абзац

  , текстовый редактор

• паста

  паста, текстовый редактор

• пауза

  пауза, плеер

• пауза-круг

  пауза-кружок, плеер

• пауза-круг-o

  пауза-круг-о, плеер

• лапа

  лапа

• PayPal

  PayPal, платеж

• карандаш

  карандаш

• ​​квадратный карандаш

  карандаш-квадратик

• карандаш-квадратик

  карандаш-квадрат-o

• процентов

  процентов

• телефон

  телефон

• телефон-квадрат

  телефон-квадрат

• фото

  фото

• фото-о

  фото-о

• круговая диаграмма

  круговая диаграмма

• Крысолов

  крысолов

• крысолов-альт

  крысолов-альт

• Крысолов-пп

  Крысолов-пп

• пинтерест

  пинтерест, социальные сети

• pinterest-p

  pinterest-p, социальные сети

• pinterest-square

  пинтерест-сквер, социальные сети

• самолет

  самолет, транспорт

• играть

  игра, игрок

• игровой круг

  игровой круг, игрок

• play-circle-o

  play-circle-o, игрок

• заглушка

  заглушка

• плюс

  плюс

• плюс-кружок

  плюс-кружок

• плюс-квадрат

  плюс-квадрат, форма

• плюс-квадрат-о

  плюс-квадрат-о, форма

• подкаст

  подкаст

• выключение

  отключение питания

• напечатать

  печать

• поиск продукта

  поиск продукта

• элемент пазла

  деталь пазла

• кв

  кв

• код

  код

• вопрос

  вопрос

• круг вопросов

  вопрос-круг

• вопрос-круг-o

  вопрос-круг-o

• квора

  квора

• цитата слева

  цитата слева

• в кавычках

  кавычка справа

• ра

  РА

• случайный

  случайных, игрок

• равелри

  равелри

• повстанец

  мятежник

• переработка

  переработать

• реддит

  реддит, социальные сети

• реддит-инопланетянин

  reddit-инопланетянин, социальные сети

• Реддит-сквер

  reddit-square, социальные сети

• обновить

  обновление, счетчик

• зарегистрированный

  зарегистрирован

• удалить

  удалить

• ренрен

  ренрен

• повторный заказ

  повторный заказ

• повтор

  повтор, текстовый редактор

• ответ

  ответ

• ответить всем

  ответить всем

• сопротивление

  сопротивление

• ретвитнуть

  ретвитнуть

• юаней

  юаня, валюта

• дорога

  дорога

• ракета

  ракета, транспорт

• поворот влево

  повернуть влево, текстовый редактор

• повернуть вправо

  повернуть вправо, текстовый редактор

• руб.

  рубля, валюта

• рсс

  rss, социальные сети

• rss-квадрат

  rss-квадрат, социальные сети

• руб

  руб., валюта

• руб.

  рубля, валюта

• рупий

  рупии, валюта

• с15

  с15

• сафари

  сафари

• сохранить

  сохранить, текстовый редактор

• ножницы

  ножницы, текстовый редактор

• поиск

  поиск

• поиск-минус

  поиск-минус

• поиск плюс

  поиск плюс

• продавец

  продавец

• отправить

  отправить

• отправка

  отправить-о

• сервер

  сервер

• акция

  поделиться

• акция-альт

  акция-альт

• акция-альт-квадрат

  акция-альт-квадрат

• доля-квадрат

  доля-квадрат

• доля-квадрат-о

  доля-квадрат-о

• шекелей

  шекеля, валюта

• шекелей

  шекеля, валюта

• щит

  щит

• корабль

  корабль, транспорт

• рубашки навалом

  рубашкиоптом

• сумка для покупок

  сумка для покупок

• корзина для покупок

  корзина для покупок

• корзина

  корзина для покупок

• душ

  душ

• вход

  вход

• язык жестов

  язык жестов, доступность

• выход

  выход

• сигнал

  сигнал

• подпись

  подпись, доступность

• простая сборка

  просто построен

• карта сайта

  карта сайта

• скайатлас

  скайатлас

• скайп

  скайп, социальные сети

• провисание

  слабина

• ползунки

  ползунки

• слайд-шоу

  слайд-шоу

• улыбка-о

  улыбка-о

• снэпчат

  снэпчат, социальные сети

• снэпчат-призрак

  снэпчат-призрак, социальные сети

• снэпчат-квадрат

  Snapchat-square, социальные сети

• снежинка-o

  снежинка-о

• футбольный мяч

  футбольный мяч-o

• сорт

  сорт

• сортировка по алфавиту по возрастанию

  сортировка-альфа-по возрастанию

• сортировка-альфа-описание

  сортировка-альфа-описание

• сортировка по сумме по возрастанию

  сортировка по сумме по возрастанию

• сортировка-сумма-описание

  сортировка-сумма-описание

• сортировка по возрастанию

  сортировка по возрастанию

• описание сортировки

  сортировка по описанию

• сортировка

  сортировка

• сортировка по возрастанию

  сортировка по возрастанию

• сортировка-числовое-описание

  сортировка-числовое-описание

• сортировка

  сортировка

• саундклауд

  саундклауд

• космический корабль

  космический корабль, транспорт

• спиннер

  блесна

  , блесна

• ложка

  ложка

• Spotify

  спотифай

• квадратный

  квадрат, форма

• квадратный

  кв-о, форма

• стек-обмен

  стек-обмен

• переполнение стека

  переполнение стека

• звездочка

  звезда

• половинка звезды

  полузвезда

• звезда-полупустая

  звезда-полупустая

• звезда наполовину полная

  звезда наполовину полная

• звезда-полукруглая

  звезда-полуо

• звездочка

  звездочка

• пар

  пар

• паровой квадрат

  паровой квадрат

• шаг назад

  шаг назад, игрок

• шаг вперед

  шаг вперед, игрок

• стетоскоп

  стетоскоп медицинский

• стикер для заметок

  стикер для заметок

• заметка-о

  заметка-о

• остановка

  стоп, игрок

• стопорный круг

  стоп-круг, плеер

• стоп-круг-о

  стоп-круг-о, плеер

• вид на улицу

  вид на улицу

• зачеркнутый

  перечеркнуто, текстовый редактор

• наткнуться на

  stumbleupon, социальные сети

• stumbleupon-круг

  stumbleupon-circle, социальные сети

• индекс

  индекс, текстовый редактор

• метро

  метро

  , транспорт

• чемодан

  чемодан

• вс-о

  солнце-о

• сверхспособности

  сверхспособности

• верхний индекс

  верхний индекс, текстовый редактор

• опора

  поддержка

• стол

  Таблица

  , текстовый редактор

• планшет

  планшет

• тахометр

  тахометр

• тег

  тег

• теги

  теги

• задачи

  задачи

• такси

  такси, транспорт

• телеграмма

  телеграмма

  , социальные сети

• телевизор

  телевизор

• Tencent-weibo

  тенсент-weibo

• терминал

  терминал

• высота текста

  высота текста, текстовый редактор

• ​​ширина текста

  ширина текста, текстовый редактор

• -й

  -й, текстовый редактор

• большой

  -й большой, текстовый редактор

• список

  -й список, текстовый редактор

• Тема

  тема

• термометр

  термометр

• термометр-0

  термометр-0

• Термометр-1

  термометр-1

• Термометр-2

  термометр-2

• Термометр-3

  термометр-3

• Термометр-4

  термометр-4

• пустой термометр

  термометр-пустой

• полный термометр

  полный термометр

• половинка термометра

  половинка термометра

• термометр-четверть

  термометр-четверть

• Термометр-три четверти

  термометр-три четверти

• кнопка

  кнопка

• палец вниз

  большой палец вниз, рука

• палец вниз

  большой палец вниз, рука

• палец вверх

  большой палец вверх, рука

• палец вверх

  палец вверх, рука

• билет

  билет

• раз

  раза

• временной круг

  раз-круг

• раз-круг-о

  раз-круг-о

• раз-прямоугольник

  раза-прямоугольник

• раз-прямоугольник-o

  раза-прямоугольник-о

• оттенок

  оттенок

• переключатель вниз

  переключатель вниз, стрелка

• перекидной левый

  тумблер влево, стрелка

• тумблер

  тумблер

• переключатель

  переключатель

• переключатель вправо

  тумблер-вправо, стрелка

• тумблер

  переключатель вверх, стрелка

• товарный знак

  товарный знак

• поезд

  поезд

  , транспорт

• трансгендер

  трансгендер, пол

• трансгендер-альт

  трансгендер-альт, пол

• мусор

  мусор

• мусор-о

  мусор-о

• дерево

  дерево

• Трелло

  Трелло

• Трипадвизор

  Трипадвизор

• трофей

  трофей

• грузовик

  грузовик, транспорт

• попробовать

  попытки, валюта

• телетайп

  tty, доступность

• тамблер

  тамблер, социальные сети

• тамблер-квадрат

  tumblr-square, социальные сети

• турецкая лира

  турецких лиры, валюта

• телевизор

  телевизор

• подергивание

  дергаться

• твиттер

  твиттер, социальные сети

• твиттер-квадрат

  твиттер-сквер, социальные сети

• зонт

  зонт

• подчеркивание

  подчеркивание, текстовый редактор

• отменить

  отменить, текстовый редактор

• универсальный доступ

  универсальный доступ, доступность

• университет

  университет

• разъединить

  отключить

• разблокировать

  разблокировать

• разблокировать-альт

  разблокировать-альт

• несортированный

  несортированный

• загрузить

  загрузить

• USB

  USB

• долларов США

  доллара США, валюта

• пользователь

  пользователь

• круг пользователей

  пользовательский круг

• пользовательский круг-o

  пользовательский круг-o

• пользователь-md

  user-md, медицинский

• пользователь-о

  пользователь-о

• пользователь плюс

  пользователь плюс

• секрет пользователя

  секрет пользователя

• пользователь-раз

  пользователя-раз

• пользователей

  пользователя

• открытка

  открытка

• vcard-o

  vcard-o

• Венера

  Венера, пол

• Венера-двойная

  Венера-двойная, пол

• венера-марс

  Венера-Марс, пол

• через монету

  виакойн, валюта

• Виадео

  видео

• виадео-сквер

  виадео-сквер

• видеокамера

  видеокамера

• видео

  видео, социальные сети

• вимео-квадрат

  vimeo-square, социальные сети

• лоза

  виноградная лоза

• вк

  вк

• телефон с регулятором громкости

  телефон с регулятором громкости, доступность

• уменьшение громкости

  уменьшение громкости

• громкость выкл.

  громкость-выкл.

• увеличение громкости

  увеличение громкости

• предупреждение

  предупреждение

• вайчат

  вичат

• вейбо

  вейбо

• вэйсинь

  вэйсинь

• WhatsApp

  WhatsApp, социальные сети

• кресло-коляска

  кресло-коляска медицинская

• инвалидная коляска-альтернатива

  инвалидная коляска-альт, медицинская

• Wi-Fi

  Wi-Fi

• википедия-w

  википедия-w

• закрытие окна

  закрытие окна

• окно-закрыть-о

  окно-закрыть-о

• окно-максимум

  окно-максимум

• окно-свернуть

  окно-свернуть

• восстановление окна

  восстановление окна

• окна

  окна

• вон

  вон, валюта

• вордпресс

  вордпресс

• wpbeginner

  wpbeginner

• wpexplorer

  wpexplorer

• формы

  формы

• ключ

  ключ

• соединение

  соединение

• соединительный квадрат

  Син-квадрат

• Y-комбинатор

  y-комбинатор

• у-комбинатор-квадрат

  у-комбинатор-квадрат

• йаху

  йаху

• г.