Шрифт страхотен 6: Пълен преглед
- 1 Как да инсталирате Font Awesome
- Метод 1.
- Метод 2.
- 2 Как да използвате страхотни икони на шрифта
- 1 стандартни икони
- 2 големи икони
- 3 икони с фиксирана ширина
- 4 икони за списък с пукнатини
- 5 рамкирани икони и цитати
- 6 анимирани икони
- 7 трансформирани икони
- 8 комбинирани икони
- 3 Font Awesome 4.5.0 collection, classes иcss code to insert using the content property
- 4 Свързани ресурси
- Размер на иконата
- Цвят на иконата
- Често Задавани Въпроси
Font Awesome е колекция от мащабируеми векторни икони. Иконите могат да бъдат форматирани с помощта на CSS свойства, да зададат своя цвят, размер, сянка и много други. Версия на шрифта 5.5.0 включва 605 икони.
1 Как да инсталирате Font Awesome
Метод 1.
Използвайте версията на файла font-awesome.css, като добавите следния код към<head> Раздел:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">След като шрифтът е свързан, можете да използвате иконите на вашия сайт.
Метод 2.
Изтеглете шрифта от%междински шрифт Страхотен %%. Разопаковайте архива и качете две папки от архива към сървъра на сайта - CSS и шрифтове. Ако вече имате папки с такива имена на вашия сайт, тогава просто трябва да добавите файлове от изтеглените папки към тях.
Можете да използвате пълната или овладяна версия на файла:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Как да използвате страхотни икони на шрифта
Иконите могат да бъдат добавени към уеб страница по два начина: чрез задаване на подходящите класове за<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: Преди {content: "\ f015";/ * Добавяне на домашна икона */шрифтове: fontawesome; цвят: #aaaaaa; марж-десен: 10px;}1 стандартни икони
Font 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, за да замените куршумите по подразбиране в a<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, consectur adipiscing elit. Donec NEC PURUS CONGUE, POSUERE Libero in, Porta Sapien. В Sed Elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 анимирани икони
Добавете FA-Spin, FA-импулс, 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 -регулиране - \ f042;Fa -chanchor - \ f13d;
Fa -Archive - \ F187;
FA -Arlows - \ F047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
FA-баланс-мащаб-\ f24e;
Fa -ban - \ f05e;
FA -банка - \ f19c;
FA -BARCODE - \ F02A;
Fa-battery-repty-\ f244;
Fa-battery-half-\ f242;
FA-Battery-Quarter-\ f243;
FA-Battery-три четвърти-\ f241;
Fa-battery-full-\ f240;
FA -легло - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -бинокъл - \ f1e5;
FA-Birthday-Cake-\ f1fd;
FA -болт - \ f0e7;
FA -бомба - \ f1e2;
FA -Book - \ F02D;
За да завъртите или обърнете иконите, използвайте класовете Fa-Rotate-* и FA-Flip-*.
4 Свързани ресурси
В допълнение към колекцията страхотна шрифта, можете да използвате и други икони шрифтове.
Фонтело.fontello има голяма колекция от различни икони шрифтове. Можете да изберете иконите, които харесвате, и да ги изтеглите на вашия компютър.
Икона на фондацията.Икона на фондация е друга колекция от икони от разработчиците на основната рамка. В допълнение към стандартните икони, сайтът разполага с кръгли икони, икони на социалните медии и други.
материали икони.Материалните икони са обединените плоски икони на Google, които въплъщават лекотата на възприятието. Иконите са оптимизирани за красив дисплей на всички общи платформи и за всички решения на екрана.
Колекцията на иконите на шрифта съдържа 750+ икони. Най -лесният начин да инсталирате колекция на вашия уебсайт е да използвате икони като Google Web Fonts. За да направите това, следният код е включен в маркировката на страницата:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">За да се покаже правилно шрифта в браузърите, елементът, който ще използва иконата на шрифта на иконата, е даден клас на материало-акороните:
.MATERIAL-ICONS {FONT-FAMILY: „Икони на материали“; Шрифтово тегло: нормален стил на шрифт: нормален размер на шрифта: 24px; / * Предпочитан размер на иконата *///////// дисплей: вграден блок; ширина: 1EM; Височина: 1EM; Линия с височина: 1; Текстова трансформация: Няма; Разстояние между буквите: Нормална дума за думи: Нормално; Бяло пространство: Ноурап; Посока: LTR; -Webkit-font-smoothing: antialiased; / * Поддържани от всички браузъри на WebKit *///////// Текстово рендериране: Оптимизиране; / * Поддръжка на сафари и хромиране *///////// -moz-OSX-FONT-SMOOTHING: сиви скали; /* Поддръжка на 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 inactive {color: rgba (0, 0, 0, 0.26);} /*<i class="material-Икони md-dark md-inactive"></i> * / /.material-Икони.md-light.md inactive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-Икони md-light md-inactive">лице</i> */////////За да зададете персонализиран цвят, трябва да добавите клас, който определя цвета на иконата, например:
.material-Икони.indigo {color: #1a237e;} /*<i class="material-Икони indigo"></i> */////////Често Задавани Въпроси
- Какво е страхотен шрифт по прости думи?
- По същество това е шрифт с икони, които могат да бъдат добавени към всеки елемент на уеб страницата, за да се подобри неговата видимост и дизайн. Колекцията се състои от няколкостотин икони, подходящи за всяка задача и цел.Повече информация за тази връзка
Мишел Пинсън е любител на пътуванията и създател на съдържание. Сливайки страст към образованието и изследването, той се ангажира с споделянето на знания и вдъхновяването на другите чрез завладяващо образователно съдържание. Сближаване на света, като овластявате хората с глобален опит и усещане за скитане.
