Шрифт Awesome 6: Повний огляд
Шрифт Awesome - це колекція масштабованих ікон векторів. Піктограми можна відформатовано за допомогою властивостей CSS, встановити їх колір, розмір, тінь та багато іншого. Шрифт версії 5.5.0 включає 605 піктограм.
1 Як встановити шрифт Awesome
Метод 1.
Використовуйте версію файлу font awause.css, додавши наступний код до<head> Розділ:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Після підключення шрифту ви можете використовувати піктограми на своєму сайті.
Метод 2.
Завантажте шрифт з шрифт Awesome . Розпакуйте архів і завантажте дві папки з архіву на сервер сайту - CSS та шрифти. Якщо у вас вже є папки з такими іменами на вашому сайті, то вам просто потрібно додати до них файли з завантажених папок.
Ви можете використовувати повну або мініфіковану версію файлу:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Як користуватися шрифтом Awesome Icons
Піктограми можна додати на веб -сторінку двома способами: встановивши відповідні класи для<i> і<span> elements, абоby adding them to the desired element using the :before, :after pseudo-elements іthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Перед {вміст: "\ f015";/ * Додати домашню ікону */font-family: fontawesome; color: #aaaaaa; ourgin-light: 10px;}1 стандартні піктограми
Шрифт Awesome призначений для використання з вбудованими елементами. Щоб додати піктограми, спочатку потрібно встановити клас FA на<i> або<span> елемент.
Щоб додати вибрану значок до або після елемента, порожній<i></i> або<span></span> Елемент додається до елемента, який присвоюється клас значків, а також додатковий клас, який розширює стиль.
<i class="fa fa-camera-retro"></i>2 великі значки
Для збільшення розміру ікони щодо його контейнера використовуйте FA-LG (збільшення на 33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 Піктограми з фіксованою шириною
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation абоlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Домашній</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Бібліотека</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Заявки</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Налаштування</a ></li></ul>4 піктограми для списку бритів
Використовуйте заняття FA-UL та FA-LI, щоб замінити кулі за замовчуванням у<ul>...</ul> Список бритів.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>пункт списку</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>пункт списку</li> <li><i class="fa-li fa fa-square"></i>пункт списку</li></ul>5 обрамлених ікон та цитат
Use the fa-border class to set the border for the icon. The pull-right іpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, condectetur adipiscing elit. DONEC NEC PURUS CONGUE, POSUERE LIBERO IN, PORTA SAPIEN. В лектусі SED Elit. SED LACUS ELIT, SEMPER VITAIE FELIS ID, SODALES CONGUE SAPIEN.</p>6 анімаційних ікон
Додайте класи FA-SPIN, FA-PULSE, FA-Refresh, FA-COG для встановлення прядильних ікон. Анімація не підтримується в IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 Трансформовані значки
Щоб обертати або перевернути піктограми, використовуйте класи FA-ROTATE-* та FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 комбінованих ікон
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, іfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes іcss code to insert using the content property
Піктограми для веб -додатків FA -ADJUST - \ F042;Fa -anchor - \ f13d;
Fa -archive - \ f187;
FA -ARROWS - \ F047;
FA -Asterisk - \ F069;
Faat - \ f1fa;
ФА-Баланс-масштаб-\ f24e;
Fa -ban - \ f05e;
FA -BANK - \ F19C;
Fa -barcode - \ f02a;
Fa-battery-Empty-\ f244;
Fa-battery-thanf-\ f242;
FA-Battery-Quarter-\ F243;
FA-Battery-Three-Quarters-\ F241;
Fa-battery-full-\ f240;
FA -ліжко - \ F236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -біноклі - \ f1e5;
Fa-birthday-cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
FA -книга - \ f02d;
Щоб обертати або перевернути піктограми, використовуйте класи FA-ROTATE-* та FA-FLIP-*.
4 Суміжні ресурси
Окрім колекції шрифту Awesome, ви також можете використовувати інші шрифти ікони.
Фонтелло.Fontello має велику колекцію різних шрифтів ікони. Ви можете вибрати піктограми, які вам подобаються, і завантажити їх на комп’ютер.
Ікона фундаменту.Ікона Фонду - ще одна колекція шрифтів піктограми від розробників фондових рамок. На додаток до стандартних ікон, на сайті є круглі піктограми, піктограми соціальних медіа тощо.
Матеріальні піктограми.Матеріальні піктограми - це єдині плоскі піктограми Google, які втілюють легкість сприйняття. Піктограми оптимізовані для красивого відображення на всіх поширених платформах та для всіх роздільних ситуацій екрана.
Колекція піктограми містить 750+ піктограм. Найпростіший спосіб встановити колекцію на своєму веб -сайті - використовувати значки, такі як веб -шрифти Google. Для цього в розмітці сторінки входить наступний код:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Щоб правильно відобразити шрифт у браузерах, елементу, який використовуватиме шрифт значка, надається клас Material-Icons:
.Матеріали-Ікони {Font-Family: «Матеріальні значки»; Шрифт: Звичайний стиль шрифту: звичайний розмір шрифту: 24px; / * Бажаний розмір піктограми */ дисплей: вбудований блок; ширина: 1em; Висота: 1em; Висока лінії: 1; Текстовий трансформація: жодна; Відкладка листів: Нормальний слів: Нормальний; Білий простір: Nowrap; Напрямок: LTR; -webkit-font-гладкий: антиаласований; / * Підтримується всіма браузерами WebKit */ Text-Mending: оптимізелегічність; / * Підтримка Safari та Chrome */ -МОЗ-OSX-FONT-GOOTHing: сіра шкало; /* Підтримка Firefox. */ шрифт-феєрифти: 'ліга'; /* ІЕ підтримка. */}Самі піктограми додаються за допомогою<I class=''material-ікони''>Лігатура або HTML -код значка</i> тег, наприклад:
<i class="material-ікони">Account_balance_wallet</i><i class="material-ікони"></i>Лігатура розуміється всіма сучасними браузерами, тобто - починаючи з версії 10. Код значка генерується автоматично, для цього потрібно клацнути лівою клацанням на зображенні значка та скопіювати запропонований вигляд.
Розмір значка
Розмір значка is controlled by additional classes:
.material-ікони.md-18 {font-size: 18px;} /* для<i class="material-ікони md-18"></i> */.material-ікони.md-24 {font-size: 24px;} /* для<i class="material-ікони md-24"></i> */.material-ікони.md-36 {font-size: 36px;} /* для<i class="material-ікони md-36"></i> */.material-ікони.md-48 {font-size: 48px;} /* для<i class="material-ікони md-48"></i> */Ікона колір
Колір піктограм також встановлюється за допомогою додаткових класів:
.material-ікони.md-dark {color: rgba (0, 0, 0, 0,54);} /*<i class="material-ікони md-dark"></i> */.material-ікони.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-ікони md-light"></i> */.material-ікони.md-dark.md-intactive {color: rgba (0, 0, 0, 0,26);} /*<i class="material-ікони md-dark md-inactive"></i> * /.material-ікони.md-light.md-intactive {color: rgba (255, 255, 255, 0,3);} /*<i class="material-ікони md-light md-inactive">обличчя</i> */Щоб встановити спеціальний колір, вам потрібно додати клас, який визначає колір значка, наприклад:
.material-ікони.indigo {color: #1a237e;} /*<i class="material-ікони indigo"></i> */Часті Запитання
- Що таке шрифт дивовижним у простому плані?
- По суті, це шрифт із піктограмами, які можна додати до будь -якого елемента веб -сторінки для підвищення його видимості та дизайну. Колекція складається з декількох сотень піктограм, придатних для будь -якого завдання та мети.Додаткова інформація про це посилання
