Шрифты - Иконки - LigatureSymbols - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Скрипты для uCoz » Текстовые эффекты » Шрифты - Иконки - LigatureSymbols

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Шрифты - Иконки - LigatureSymbols

Красивые шрифты LigatureSymbols в виде иконок для Вашего сайта




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





Создаём отдельный файл стилей

Лучше сделать индивидуальный файл стилей для шрифтов LigatureSymbols, надеюсь Вам не нужно пояснять что такая фича прилично "весит" и не логично подключать эти шрифты в перегруженных местах сайта. Так вот, создайте текстовый документ с расширением .css впишите в него текст из примера и укажите путь к файлам на Вашем сервере, я специально не удалял ссылки на свой сервер чтобы было более понятно где их прописывать.



@charset 'UTF-8';
@font-face {
font-family: 'LigatureSymbols';
src: url('http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols-2.07.eot');
src: url('http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
url('http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols-2.07.woff') format('woff'),
url('http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols-2.07.ttf') format('truetype'),
url('http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}


Сделав файл стилей и назвав его например LigatureSymbols.css загружаем его на свой сервер в ту же папку где находятся файлы шрифта. Далее будет пояснено как их применить в отображаемый вид.


Как подключить шрифт LigatureSymbols на сайте

Для подключения понадобится форма добавления HTML кодов в которое сначала помещаем код импортирующий Ваш файл стилей LigatureSymbols.css с указанным адресом к файлу css, выглядит он так:



<style type="text/css">
@import url("http://delaisait.ucoz.ru/shrift/LigatureSymbols/style.css");
</style>


Скопировали код импортируемого стиля в поле поддерживающее HTML редактирование, прописали адрес к своему файлу LigatureSymbols.css. Осталось рассказать как активировать нужный шрифт, для этого понадобится код который находится в графе "Юникод" напротив каждого их шрифтов. Страница с подключенными шрифтами находится ниже, возьмём для примера любой Юникод шрифта и рассмотрим варианты подключения. Обратите внимание что хоть с виду шрифты LigatureSymbols похожи на иконки, к ним применяются те же свойства шрифтов CSS3 как и к обычным буквам и цифрам. Шрифту иконке нужно указать основные параметры:
1. Семейство шрифта - ( LigatureSymbols ) ему соответствует свойство - font-family
2. Размер - ( например в пикселях ) ему соответствует свойство - font-size
3.Цвет - определяемый свойством - color
Сделать шрифт активным можно с помощью разных тегов HTML, рассмотрим на примере самого распространённого - <div>.


Активируем шрифт иконку в работу

Пример будет показан с местным указанием стилей, тоесть в самом теге а не в зоне тега <style>, делать можно по разному, при местном внесении стилей их приоритет возрастает. Сделаем иконку браузера IE в 500 пикселей размером и зелёного ( планового ) цвета :)



<div style="font-family: 'LigatureSymbols'; font-size: 500px; color: green;">&#xe077;</div>

Чтобы проверить и поэкспериментировать с изменениями в применении шрифта LigatureSymbols Вам нужно нажать на картинку в левом нижнем углу страницы сайта, откроется панель инструментов в которой нажмите "Редактор HTML" и поместите в него комплект для отображения шрифта - иконки LigatureSymbols вот он, ниже ↓.


Комплект для проверки шрифта LigatureSymbols в редакторе HTML

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



<style type="text/css">
@import url("http://delaisait.ucoz.ru/shrift/LigatureSymbols/style.css");
</style>
<div style="font-family: 'LigatureSymbols'; font-size: 500px; color: green;">&#xe077;</div>


Ниже находится страница шаблон со всеми возможными для применения шрифтами LigatureSymbols.


Все шрифты - иконки LigatureSymbols в одном шаблоне



Код шаблона шрифтов LigatureSymbols для Вашего сайта

Если Вам понравились эти шрифты, не обязательно возвращаться на эту страницу регулярно, установите где нибудь у себя шаблон, добавив код на старницу своего сайта. Он займёт 100% ширины страницы, а высоту ( значение height="600" ) определите сами, как будет удобнее.



<iframe src="http://delaisait.ucoz.ru/shrift/LigatureSymbols/LigatureSymbols.html" frameborder="0" height="600" width="100%"></iframe>

Скачать шрифты иконки LigatureSymbols бесплатно










Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1184 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: бесплатно, ICON, Скачать, шрифты, uCoz

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

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]