Підключення та використання іконочние шрифтів

Щоб просто і швидко додати масштабовані картинки до різних елементів сайту, без використання спрайт-зображень. можна застосувати іконочние шрифт, в якому зібрані всі необхідні іконки в одному стилі. У переважній більшості випадків, символи додані таким чином, правильно відображаються в браузері інтернет-користувача і залишаються чіткими при збільшенні і зменшенні масштабу веб-сторінки. І хоча самі зображення елементів мають досить простим, але сьогодні дуже модним дизайном, їх оформлення, наприклад колір і фон, можна змінити без праці.
Сервісів надають безкоштовні, готові збірки шрифтових картинок досить, при цьому різноманітність іконок в них може задовольнити практично будь-які потреби при створенні сайту або оформленні блогу. У цій статті мова піде про те, як підключити іконочние шрифт і використовувати його при оформленні сайту.

Два найбільш популярних ресурсу це Font Awesome і Fontello. перше (і головне) - вони безкоштовні; друге - Font Awesome - надає публічну посилання для прямого завантаження шрифту зі свого хостингу, тобто не потрібно використовувати свій або шукати сторонній хостинг для розміщення необхідних файлів, в Fontello можна зібрати свій власний шрифт, завантажуючи на сайт іконки в .svg форматі, або вибрати із загального набору саме ті, які потрібні в даному випадки, а не завантажувати все що є.

Як підключити іконочние шрифт до сайту

Способів підключення на даний момент існує три:

1. Якщо доступна, використовувати загальну (публічну) пряме посилання на хостинг сервісу, яку потрібно розмістити всередині розділу . краще вище або перед закриває . це вже як піде.
Для Font Awesome остання версія посилання виглядає так:

2. Завантажити архів з усіма необхідними файлами, витягти вміст папок CSS і Fonts, розмістити витягнуті файли на хостингу свого сайту в відповідні папки і вказати на них посилання в секції . вашого сайту таким чином -

- дати шлях тільки до папки:

- віддалено підключити файли з CSS з відповідною папки:

3. Після завантаження архіву з фалами, витягти тільки вміст папки Fonts і підключити іконочние шрифт, використовуючи правило CSS @ font-face:

# 64; font-face font-family: 'fontello';
src: url ( '.. шлях-до-файлу / fontello.eot');
src: url ( '.. шлях-до-файлу / fontello.woff') format ( 'woff'),
url ( '.. шлях-до-файлу / fontello.ttf') format ( 'truetype'),
url ( '.. шлях-до-файлу / fontello.svg # fontello') format ( 'svg');
font-weight: normal;
font-style: normal;
>

Як використовувати іконочние шрифт на сайті

У кожного обраного символу є назва і код, подивитися їх можна як на сторінці офіційного сайту, так і на демо сторінці з завантаженого архіву. Назва, по сумісності, є так само і додатковим класом елемента, для якого потрібна іконка, код використовується як UTF-символ іконки. Способи додавання символів на сторінку залежать від варіанту підключення шрифту.

Якщо скористатися другим варіантом - підключити шрифт використовуючи CSS-файли. можливо додавання знаків як за допомогою класу, так і коду:

1. Створити порожній елемент з класом іконки і додати його перед потрібним блоком:

2. Додати клас з назвою символу до потрібного елементу:

3. Додати в CSS псевдоелемент для елемента з іконкою, який буде містити UTF-код бажаного символу і вказувати на використовуваний шрифт (в даному прикладі - Fontello):

ul li a :: before content: '\ e80a';
font-family: "fontello";
font-style: normal;
font-weight: normal;
>

Якщо для підключення шрифту іконок використовувати третій варіант - тільки файли шрифтів. то для того, щоб можна було додавати іконки за коштами присвоєння відповідного класу-назви, в CSS потрібно внести додаткову конструкцію встановлює підключений шрифт для цих елементів і для кожного вказати пов'язаний з ним символ:

[Class ^ = "icon -"] :: before,
[Class * = "icon -"] :: before font-family: "fontello";
font-style: normal;
font-weight: normal;
>
.icon-doc-inv :: before content: '\ e801';
>
.icon-mail-alt :: before content: '\ e805';
>

але можна обійтися і без неї, запис виду:

/ * Іконки будуть додані * /
.icon-doc-text-inv :: before
ul li a :: before

- буде працювати все одно.

Підключення та використання іконочние шрифтів