Фонт авесоме иконки: fa-telegram: Иконки Font Awesome

Надеюсь Вы думаете что 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 на своем сайте

by Sylvia Bass | 10 июня 2021 г. | Советы и рекомендации

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

Расширенная функция

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

Добавление кода Font Awesome Kit на ваш сайт

Вам потребуется создать свой собственный Font Awesome Kit. См. инструкции ниже.

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

Тема Divi

Если вы используете тему Divi, в нее встроена возможность добавления кода комплекта.

1. Перейти Divi > Параметры темы
2. Перейдите на вкладку Интеграция в параметрах темы Divi
3. В поле Добавьте код в раздела блога , вставьте код из набора Font Awesome.
4. Щелкните Сохранить изменения .
5. Теперь вы сможете использовать значки Font Awesome на своем сайте.

Темы, не относящиеся к Divi

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

1. Перейдите к Плагины > Все
2. Найдите Расширенные настройки и нажмите кнопку Активировать .
   
3. После активации перейдите в Настройки > Расширенные настройки
4. Прокрутите вниз до Дополнительный код и вставьте код комплекта в поле Тег заголовка (низкий приоритет).
5. Нажмите Сохранить изменения

Как добавить значки Font Awesome на ваш сайт

Первый шаг — найти идеальную иконку. Перейдите на веб-сайт Font Awesome и щелкните меню Icons вверху, чтобы увидеть все их бесплатные и профессиональные значки.

Поиск нужного значка

1. Введите поисковый запрос в поле поиска. Вы можете использовать фильтр бесплатных значков, чтобы ограничить набор значков теми, для которых не требуется платная лицензия.
2. Например, если вы ищете значок предупреждения, введите «предупреждение». Вы увидите набор значков, соответствующих этому описанию. Найдите тот, который лучше всего соответствует вашим потребностям.
3. Кроме того, вы можете просто просмотреть более 1600 бесплатных иконок, прокручивая весь набор.
4. Когда вы найдете тот, который вам нравится, щелкните значок, чтобы просмотреть сведения об этом значке, включая HTML-код для использования значка на вашем сайте.
5. Скопируйте предоставленный код HTML. Он будет начинаться с

Использование кода значка

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

Редактор блоков

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

1. Добавьте новый пользовательский блок HTML
2. Добавьте код Font Awesome, где вы хотите, чтобы значок отображался вместе с любым дополнительным содержимым. Вам нужно будет добавить некоторые базовые элементы HTML, такие как теги абзацев, теги заголовков и т. д.
3. Значок будет такого же размера, как ваш текст. Если вы хотите изменить размер, вы можете использовать класс CSS, чтобы сделать его больше или меньше. У Font Awesome есть отличная страница, объясняющая, как использовать эти классы и куда поместить код.
4. Вы не увидите иконку в своем блоке во время редактирования, но можете Просмотрите страницу, и вы увидите отображаемый значок. Если вы не видите значок, убедитесь, что вы добавили Font Awesome Kit на свой веб-сайт. Иконки взяты прямо с сайта Font Awesome.

Пример кода HTML

Привет, мир!

 

Привет, мир!

Пример вывода приведенного выше кода.

Использование FontAwesome в Divi

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

В Divi вы можете использовать значок Font Awesome в любом модуле, который позволяет вам редактировать на вкладке «Текст» (то есть HTML), а также на вкладке «Визуальные».

1. Отредактируйте блок, в который вы хотите добавить значок, например текстовый модуль.
2. Щелкните вкладку Текст при редактировании содержимого, чтобы отобразить базовый HTML-код.
3. Добавьте HTML-код значка Font Awesome, который вы скопировали ранее.
4. Вставьте его в нужное место и добавьте класс CSS, чтобы при необходимости изменить размер.
   
5. Сохранить модуль.
6. В Divi вы должны увидеть значок в режиме редактирования, так как вы видите страницу в режиме реального времени.

Получение собственного набора Font Awesome Kit Код

Вам потребуется создать учетную запись Font Awesome, чтобы получить доступ к их бесплатным наборам. У Font Awesome также есть платные аккаунты, которые добавляют еще больше значков. По состоянию на февраль 2022 года учетные записи Pro имеют 14 865 значков и другие функции. Бесплатной учетной записи, вероятно, будет достаточно, но приятно знать, что есть варианты.

1. Перейти на стартовую страницу Font Awesome.
2. Добавьте свой адрес электронной почты и нажмите кнопку « Отправить код комплекта ».
3. Проверьте свою электронную почту для подтверждения и настройте свой пароль и данные учетной записи.
4. После того, как вы настроите свою учетную запись, вам будет предоставлен код комплекта . Вы будете использовать этот код, чтобы добавить Font Awesome на свой сайт.
5. Используйте приведенные выше инструкции, чтобы добавить собственный комплект в раздел вашего сайта.

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

Подписаться на новые сообщения

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

Адрес электронной почты

Иконки Fontawesome и интеграция Flaticon от Keenthemes самый популярный набор иконок и набор инструментов в Интернете. Бесплатный пакет Font Awesome входит в состав Metrotronic и может использоваться прямо сейчас, просмотрев бесплатные иконки Font Awesome.

Используйте значки Font Awesome с особым классом, как описано в Страница предварительного просмотра значка:

 
<я>
<я>
<я>
<я>
<я>
<я>
 

Встроенные значки могут быть окрашены с помощью класса . text-{color} , который определен с помощью переменной $theme-text-colors в sass/_variables.scss :

первичный

secondary

success

warning

danger

gray-100

gray-200

gray-300

gray-400

gray-500

gray -600

серый-700

серый-800

серый-900

 
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
 

Размер значков шрифтов можно изменить с помощью класса .fs-{size} , который определен с помощью переменной $font-sizes в sass/_variables.scss

Где размер является одним из:

• 1 — устанавливает размер иконки равный
  размер шрифта
• 2 — устанавливает размер значка равный
  размер шрифта
• 3 — устанавливает размер иконки равный
  размер шрифта
• 4 — устанавливает размер иконки равный
  размер шрифта
• 5 — устанавливает размер иконки равный
  размер шрифта
• 6 — устанавливает размер значка равный
  размер шрифта
• 7 — устанавливает размер иконки равный размер шрифта
• 7 — устанавливает размер значка, равный 0,95 от $font-size-base , где $font-size-base: 1rem
• 8 — устанавливает размер значка, равный 0,85 от $font-size-base , где $font-size-base: 1rem
• 9 — устанавливает размер значка, равный 0,75 от $font-size-base , где $font-size-base: 1rem
• 10 — устанавливает размер значка, равный 0,5 от $font-size-base , где $font-size-base: 1rem
• base — устанавливает размер значка, равный $font-size-base , где $font-size-base: 1rem
• жидкость — устанавливает размер значка, равный 100%
• 2x — устанавливает размер значка, равный 2 из $font-size-base , где $база размера шрифта: 1rem
• 2qx — устанавливает размер значка, равный 2,25 от $font-size-base , где $font-size-base: 1rem
• 2hx — устанавливает размер значка, равный 2,5 от $font-size-base , где $font-size-base: 1rem
• 2tx — устанавливает размер значка, равный 2,75 от $font-size-base , где $font-size-base: 1rem
• 3x — устанавливает размер значка, равный 3 из $font-size-base , где $font-size-base: 1rem
• 3qx — устанавливает размер значка, равный 3,25 от $font-size-base , где $font-size-base: 1rem
• 3hx — устанавливает размер значка, равный 3,5 от $font-size-base , где $font-size-base: 1rem
• 3 тх — устанавливает размер значка, равный 3,75 от $font-size-base , где $font-size-base: 1rem
• 4x — устанавливает размер значка, равный 4 из $font-size-base , где $font-size-base: 1rem
• 4qx — устанавливает размер значка, равный 4,25 от $font-size-base , где $font-size-base: 1rem
• 4hx — устанавливает размер иконки равный 4.