Что такое код swffont


Содержание

Как подключить и использовать иконки Font Awesome 5

Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.

Как подключить Font Awesome

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

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.

На скриншоте №1 изображены настройки, которые я использую.

  1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
  2. Начертание шрифта, которое мы будем использовать в своем проекте.
  3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
  4. Сгенерированный код для подключения Font Awesome с помощью CDN.

Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.

После скачивания получаем архив с файлами, как на скриншоте №2:

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

.min в названии файла показывает, что файл сжат, то есть убраны лишние пробелы и переносы. Это увеличивает скорость обработки этого файла, но если вы собираетесь его редактировать, что я вам делать не рекомендую, то удобней использовать файл без .min

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

Как использовать шрифт Font Awesome в Photoshop

Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».

Смотрите на скриншоте №6:

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.


Стилизация иконок FontAwesome

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.

Font awesome: добавляем свои иконки

На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:

Что такое Font Awesome

Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.

Таблица иконок Font Awesome

Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество. Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.

Способы добавления своих иконок

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

Сложный способ редактирования Font Awesome

  1. Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки.
  2. Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
  3. Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.

Простой способ внесения изменений в Font Awesome

Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:

  • Fort Awesome: https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис, от создателя Font Awesome, пробный период — 14 дней.
  • Fontello: http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
  • IcoMoon: http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
  • Fontastic: http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.

Вы можете использовать любой из предложенных, это быстро и просто. Лично я рекомендую IcoMooon. Последнее время пользуюсь именно им и в этой статье я опишу как использовать IcoMoon детальнее.

Добавление иконок через Icomoon

IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных приложениях. Допустим у вас подключен Font Awesome, а вам нужно добавить иконки из других шрифтов или вообще свою собственную иконку с вашим логотипом. Для этого вы создаете новый проект в IconMon, импортируете в него Font Awesome шрифт, если нужно то другие шрифты или свои иконки в виде шрифтов/svg картинок. Затем вы скачиваете получившийся шрифт и используете в своем приложении вместо Font Awesome. Ниже я покажу как это делать пошагово.

IconMon: начало работы

  • Заходим на сайт сервиса iconmon.io и жмем кнопку IcoMoon App
  • При запуске IconMon вы попадете на экран управления проектом. В нем по дефолту уже будет список бесплатных иконок, которые нам предлагает IconMon. Так как наша задача была в том,
    чтобы обновить шрифт Font Awesome, то первое что мы сделаем — это импортируем его в IcoMoon.
  1. Жмем кнопку Import Icons (в верхнем левом углу) и выбираем файл fontawesome-webfont.svg из папки шрифтов, которую вы использовали ранее.
  2. Отлично. После того, как мы добавили Font Awesome, загрузим и свою собственную иконку в svg формате тем же способом (Import Icons).
  3. Теперь все необходимые иконки и наборы иконок загружены в систему мы можем по необходимости их немного исправить или просто изменить. Для этого в верхнем меню управления переключите режим с «Select» на «Edit» и выберите иконку в таблице иконок. При редактировании можно выполнять следующие операции: Разворот/Отражение иконки (Rotate), Масштабирование (Scale), Выравнивание (Align), Цвет (Color).
  4. После редактирования (если оно было необходимо) и загрузки нужных иконок в IconMon нам нужно отметить те, которые будут в нашем новом шрифте. Для этого в верхнем меню выбираем (если не выбрано) Select и отмечаем нужные иконки. Также Вы можете выбрать сразу весь набор. У нас есть загруженный набор Font Awesome — справа от заголовка набора нажимаем на кнопку управления и выбираем Select All. Не забываем отметить нашу собственную иконку.
  5. В нижнем правом углу экрана нажимаем Generate Font. После нажатия мы попадем на экран просмотра шрифта, который мы создали. На этом экране можно указать или исправить названия иконок. Также обратите внимание, на дополнительные опции рядом с кнопкой Download. В этих опциях можно указать название, различную мета-информацию и указать способ, которым иконки будут вставляться у вас на сайте. Также можно указать версию шрифта.
  6. Убедившись, что все нужные правки созданы, нажимаем на кнопку Download и скачиваем новый шрифт.

Публикация готового сета иконок Iconmoon на сайте

Скачав архив вы можете подключить его на своем сайте вместо Font Awesome и использовать иконки уже из этого набора, включая вашу собственную иконку. Для подключения на сайте нам понадобятся файлы из папки fonts и style.css — заливаем их к себе на сайт (при необходимости style.css можно переименовать или вообще добавить контент из него в свой css файл, который был использован на сайте ранее). Обратите внимание, что разместив font и css у себя на сайте относительный путь к шрифтам в css файле мог изменится. По этому откройте уже загруженный на ваш сайт css код и убедитесь, что к шрифтам прописаны верные пути. Вот тут я красным выделил место, где нужно проверить пути.

@font-face <
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?29mi8v’);
src: url(‘fonts/icomoon.eot?29mi8v#iefix’) format(’embedded-opentype’),
url(‘fonts/icomoon.ttf?29mi8v’) format(‘truetype’),
url(‘fonts/icomoon.woff?29mi8v’) format(‘woff’),
url(‘fonts/icomoon.svg?29mi8v#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;


После успешного переноса файлов iconmon на сайты использовать иконки можно таким образом:

Как обновлять ваш сет с иконками в будущем

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

  1. Хранение ваших проектов в облаке Iconmon — это платная услуга. При регистрации в Iconmon можно выбрать подписку, оплатить ее и ваши проекты шрифтов будут храниться в вашем аккаунте. Вы всегда сможете изменить их, поставить версию выше, скачать и использовать.
  2. Если вы не чистили кэш браузера, то ваши проекты также останутся при повторном заходе на IconMon и вы сможете легко добавить новую дополнительную иконку в ваш проект и сохранить себе обновленный шрифт. Главная проблема в том, что после того, как вы почистите кеш в браузере, все это будет удалено.
  3. Настройки проекта в файле selection.json — наиболее подходящий вариант для нас. Во-первых — это бесплатно. Этот файл вы скачиваете в архиве со шрифтом каждый раз, когда генерируете его.
    Просто храните этот файл и в будущем можно будет заходить на IconMo и импортировать ваши проекты через него.
Илон Маск рекомендует:  invert() в CSS

Заключение

Возможно есть и более удобные способы добавления своих иконок в Font Awesome, но они или платные или требуют более глубоких технических знаний. Этот же способ с использованием IconMon — прост, бесплатен и достаточно удобен. Если у вас появились какие-нибудь сложности, то добро пожаловать в комментарии. С радостью помогу.

Font Awesome

Видео: Font Awesome

CSS код и примеры использования этого шрифта-иконок «Font Awesome». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:»») и результат.

Шрифты-иконки Font Awesome

Добавьте css файл шрифта, который необходим (в зависимости от версии).
Если структура Вашего сайта (приложения) имеет другую файловую структуру (файлы лежат в других папках), то измените все пути на свои пути (например: /assets/css/).
Если Вы не понимаете о чем идет речь, перейдите на эту страницу. Затем нажмите сочетания клавиш Ctrl+U или правой кнопкой мыши на пустом месте страницы > Исходный код страницы / Исходный текст страницы (как-то так должно быть написано в контекстном меню).
Например, подключить шрифт FA можно так:

Данным кодом ↑ будет подключена максимальная версия шрифта со всеми иконками

Также закиньте в эту папку папку из архива
Добавьте такой код на страницу или в CSS файл, чтобы можно было легко использовать шрифт FA ( , А НЕ )

Как использовать шрифты-иконки?

Например, Вы можете использовать импорт CSS кода. Скачайте и разместите у себя на сервере файлы шрифта. Затем подключите их в любой из подключенных к нужной странице CSS файл. Код подключения доступен выше. После этого, Вы сможете писать следующий код, например:

Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО. Если Вы не хотите подгружать весь CSS код, то можете использовать лишь импорт шрифта и создавать свои классы.

Что такое Icon Fonts? Знакомимся с помощью FontAwesome и IconMoon

Здесь я продемонстрирую отличные решения, которые могут быть достигнуты с помощью Icon Fonts, однако давайте сначала познакомимся с самим понятием шрифтовых иконок, а также с положительными и отрицательными сторонами их использования. Затем мы протестируем два самых популярных набора шрифтовых иконок с помощью различных примеров, что позволит вам увидеть как они могут быть использованы в реальных проектах.

Что такое Icon Fonts?

Icon Fonts — это не что иное, как обычные шрифты. Отличие лишь в том, что вместо привычных для нас наборов шрифтов, состоящих из цифр и букв, шрифтовые иконки содержат различные символы и глифы . Но основная причина популярности Icon Fonts в Веб заключается в том, что они с легкостью поддаются CSS стилизации.

Достоинства и недостатки шрифтовых иконок.

Существует несколько веских положительных моментов, свидетельствующих в пользу применения шрифтовых иконок вместо растровых изображений:

  • К ним можно применить любой CSS эффект.
  • Они масштабируемы, поскольку создаются с помощью векторной графики. Это позволяет увеличивать или уменьшать их без потери качества.
  • Загрузка производится посредством единственного, в крайнем случае, пары HTTP запросов, вместо большого их количества, которые могут потребоваться для загрузки растровых изображений.
  • Они загружаются быстрее, что связано с их малыми размерами.
  • Их поддержка имеется во всех браузерах (даже таких как IE6).

Итак, получается, что шрифтовые пиктограммы идеально подходят для любых случаев? Конечно, нет. Несмотря на то, что они являются отличным средством улучшения дизайна, им также присущи некоторые ограничения. Так, к примеру, если вместо обычной иконки вы хотите показать сложное изображение, то Icon Fonts вам не поможет.

Они, к тому же, зачастую ограничены одним цветом, что можно изменить лишь применив некоторые CSS трюки. Более того, шрифтовые иконки создаются под определенные сеточные шаблоны, так их размеры могут быть 16х16, 32х32, 48х48 пикселей есть, конечно, и другие варианты. И если вы измените используемую сеточную систему на другую с размерностью, к примеру, 25х25, то того же четкого результата вы можете уже не получить (однако ситуацию можно исправить с помощью определенных CSS свойств).

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

Оставшаяся часть статьи будет посвящена базовому описанию следующих двух библиотек шрифтовых иконок:

Вашему вниманию также будут представлены четыре примера различного использования Icon Fonts.

Пиктогаммы FontAwesome.

FontAwesome представляет собой богатую коллекцию иконок, состоящую из 439 экземпляров. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Изначально она разрабатывалась с целью использования в рамках системы Bootstrap, однако ее применение не ограничивается исключительно этим фреймворком.

Начинаем работать с FontAwesome.

Самый удобный путь включения иконок FontAwesome в свой проект лежит через CDN (сеть доставки контента). Если же вам необходимо работать off-line, то без загрузки полного пакета иконок вам не обойтись.

Необходимо также отыскать и включить в директорию сайта CSS файл и сгенерированную системой папку, содержащую шрифты различных форматов. Далее добавляем в HTML разметку фрагмент кода, подключающий наш CSS файл. В заключение следует убедиться в корректности путей, используемых в URL адресах параметров @font-face и src скачанного CSS файла, которые должны совпадать с соответствующей директорией вашего сайта. Для того, чтобы узнать все возможные способы включения этой библиотеки иконок в свой проект, обратитесь к прилагаемой инструкции, описывающей необходимые шаги по ее подключению.

Эти иконки должны размещаться внутри элемента span либо i , которым необходимо назначить два класса. Первый — это класс fa , а имя второго должно соответствовать имени пиктограммы, которую вы хотите использовать, к примеру, fa-home . Имена всех доступных в данной библиотеке иконок перечислены в прилагаемой памятке.


Для дополнительной настройки вида иконок можно применять другие предопределенные классы, которые представлены здесь вместе с примерами их использования.

Что же, давайте увидим пакет FontAwesome в действии, используя его в различных ситуациях.

FontAwesome — пример первый.

Для начала давайте займемся созданием вертикального навигационного меню. Первое, что необходимо сделать, это обернуть нужные иконки в элементы i и увеличить их до размера, соответствующего величине их контейнера, что достигается использованием предопределенного класса fa-2x . Далее производим необходимую CSS стилизацию.

Вот пример разметки для двух элементов навигационного меню:

А это соответствующий CSS код:

nav li:not(:first-child) <
margin-top: 1px;
>

nav li a <
outline: none;
position: relative;
width: 100%;
height: 100%;
>

nav i <
color: steelblue;
vertical-align: middle;
>

nav li a:after <
background: #ededed;
content: attr(data-name);
display: none;
margin-left: 1px;
width: 160px;
height: 80px;
left: 80px;
position: absolute;
font-size: 1.2em;
>

nav li a:hover:after <
display: inline-block;
>

FontAwesome — пример второй.

В следующем примере мы создадим простейшую панель социальных сетей. Для этого поместим нужные иконки в элементы i , удвоим их размер с помощью класса fa-2x , чтобы заполнить область контейнера, и оформим их соответствующим образом посредством CSS.

HTML код для одной иконки выглядит вот так:

А это код для стилизации:

section i <
vertical-align: middle;
transition: color.3s ease-in-out;
>

section a:nth-child(1):hover i <
color: #3b5998;
>

Результат такой работы:

FontAwesome — пример третий.

В этом, третьем примере мы применяем иконки к форме входа в аккаунт. Выполняем действия, аналогичные первым двум примерам. Отличие лишь в том, что здесь мы используем другой предопределенный класс fa-fx , фиксируя тем самым из ширину (равную примерно 1,25 em).

HTML и CSS код схож с приведенными выше вариантами. Ниже вы можете увидеть результат их работы:

Обратите внимание, в этом случае мы используем те же иконки, что и в примере создания социальных кнопок.

Иконки IcoMoon.

Другим популярным решением шрифтовых иконок является IcoMoon, в рамках которого представлены два пакета. Первый можно использовать свободно, а второй Premium, предусматривающий расширенные возможности. Дополнительную информацию по этим двум пакетам иконок можно найти здесь. В зависимости от выбранного варианта вам будет доступно различное количество иконок и их формат. Так, к примеру, бесплатная версия содержит 450 экземпляров, а максимальная — 1266.

Помимо этих пакетов, IcoMoon предоставляет онлайн приложение, позволяющее выполнять поиск и загрузку более 3500 бесплатных иконок. Данное приложение, к тому же можно использовать для некоторых простейших операций по редактированию иконок, которым можно отнести их ротацию, смену цвета и другое.

Здесь вам также предоставляется возможность внедрения собственных пиктограмм или даже создания собственных наборов шрифтовых иконок. Для этого имеется несколько бесплатных и платных тарифов (с базовыми и расширенными возможностями).

Принцип работы с IcoMoon.

Выбранный вами для загрузки пакет содержит иконки различных форматов (таких, к примеру, как SVG, AI или PSD). При этом данный веб-сервис позволяет загружать пиктограммы как в SVG формате (мы не будем этого делать), так и в виде шрифтовых иконок.

По окончании загрузки иконок вам необходимо включить в состав своего проекта CSS файл и папку, содержащую сгенерированные системой шрифты различного формата, убедившись в соответствии содержащихся в параметрах @font-face и src URL адресов их реальным адресам в вашем проекте.

Существует также возможность включения ссылки быстрого использования непосредственно в ваш HTML код (будем считать ее ссылкой на CDN ) и после этого вы можете использовать выбранные иконки. Однако эта опция постоянно доступна только в максимальной версии, хотя в базовой версии она тоже присутствует, правда лишь временно, только на один день.

Аналогично иконкам из рассмотренной выше библиотеки FontAwesome, каждая из иконок IcoMoon тоже должна быть включена в состав элемента . Затем вам следует присвоить элементу класс, имя которого должно соответствовать имени пиктограммы, которую вы хотите включить в ваш проект (например, icon-home ). Кроме того у вас есть возможность редактирования имен иконок (т.е. вы можете устанавливать свой префикс вместо используемого по умолчанию). Это делается до загрузки пиктограмм через вкладку Preferences (Предпочтения).

Давайте обратимся к примеру.

Пример использования IcoMoon.

В этом примере мы будем использовать иконки для создания раздела section , отражающего рабочий процесс нашей компании. Как и полагается, мы включим пиктограммы в элементы span , а затем произведем необходимые CSS настройки для их стилизации.

Вот разметка для двух иконок:

section span <
padding: 15px 0;
font-size: 5em;
display: block;
color: steelblue;
transition: all.2s ease-in-out;
>

section li:hover span <
transform: translateY(-10px);
>


Результат работы последнего примера можно увидеть здесь.

Надеюсь что данный тур по двум наиболее популярным библиотекам шрифтовых иконок заинтересовал вас и возможно поспособствовал тому, что в следующем проекте вы будете их использовать.

Иконочные шрифты для сайта — что это и как использовать?

Доброго времени суток всем, кто решил посетить мой интернет-дневник zaurmag.ru. Вот и наступил 2020 год. Если вы заметили я в свой блог пишу очень редко и говорить о каких-то достижениях в ушедшем году я не буду. Не то, чтобы я совсем ничего не добился, просто результаты оказались не теми, что я ожидал. В любом случае это тема для отдельной заметки. А в этой статье я хочу затронуть такую тему, как иконочный шрифт. Давно хотел написать про иконочный шрифт, т.к. он стал в последнее время очень популярным, но все руки никак не доходили. Хотелось бы раскрыть эту тему более подробно.

Как вы наверно поняли из названия иконочный шрифт — это иконки, которые используются в дизайне сайта. Иконочный шрифт внедряется в шаблон сайта посредством подключения шрифтов, т.е. иконки — это обычный шрифт, только вместо букв и цифр специальные символы, которые потом преобразуются в иконки. Подключается он в шаблоне также, как и нестандартный шрифт. Про подключение нестандартных шрифтов я уже писал. Можете заглянуть и почитать, если не знаете, как это делается. Также данный шрифт вы можете установить в свою операционную систему. Устанавливается все также, как и обычный шрифт. Данный шрифт можно использовать в фотошоп для создания иконок путем вставки специальных символов. Как все это делается читайте ниже.

Навигационное меню

Давайте для начала определимся с плюсами и минусами иконочного шрифта. Вы наверно сейчас скажете: «А что есть и минусы?». Да, конечно, у иконочных шрифтов есть свои минусы, правда они мне как верстальщику не мешают.

Плюсы:

  • иконки из шрифтов имеют векторный формат, т.е. мы можем изменять их размер практически до бесконечности, не теряя в при этом в качестве. Замечу с растровыми изображениями такой трюк не пройдет;
  • один http-запрос на сервер (хотя если с картинками использовать спрайты будет тоже самое, но дело в том, что собирать иконки в спрайты немного трудоемко)
  • быстрая загрузка за счет малого веса (файл стилей можно минимизировать);
  • легко стилизовать посредством css-правил (изменять размер, цвет, трансформировать, анимировать и др.);
  • кроссбраузерность (включая поддержку старыми браузерами).

Минусы:

  • в первую очередь следует понимать, что иконочный шрифт это обычный шрифт, а шрифты при подключении могут создавать дополнительную нагрузку в виде отправки дополнительных запросов на сервер. Причем, эта нагрузка будет увеличиваться по мере роста набора ваших икнок, т.е. размер файла шрифта будет увеличиваться;
  • ограничение полету фантазии дизайнеру (по сути дизайнер ограничен именно тем набором иконок, что присутствуют в сервисах. Можно, конечно, и свою икноку загрузить, но это немного сложный процесс);
  • иконки могут быть только в одном цвете (например, в SVG одну иконку можно залить и сделать разноцветной, как радугу), если конечно не примените различные css-трюки;

Где взять иконочный шрифт?

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

Вот некоторые ссылки на сервисы иконочных шрифтов:

Font Awesome

Как я заметил на зарубежных сайтах большую популярность получил Font Aswesome. Font Awesome — это библиотека иконок, которая изначально была придумана для фреймворка Twitter Bootstrap. Но в дальнейшем разработчики решили, что ее можно использовать отдельно. Из основных плюсов данной библиотеки я бы отметил развитие проекта и частое обновление базы иконок. С каждым выходом новой версии в набор добавляются все новые иконки, что в свою очередь не может не радовать.

Подключение Font Awesome

Для начала нам необходимо скачать набор иконок с официального сайта (ссылка выше). Жмем по большой кнопке «Download» на главной странице сайта. Распаковываем архив с иконками у себя на компьютере.

Копируем папки «css» и «fonts» в шаблон вашего сайта. Далее, необходимо подключить файл стилей в главном файле шаблона (index.php). В архиве лежат две версии файла – сжатая (минимизированная) и разжатая. Подключаем сжатую версию — font-awesome.min.css.

Не отходя от темы сразу скажу, что данный файл можно подгрузить с CDN – BootstrapCDN или MaxCDN.

Это нужно для того, чтобы уменьшить количество http-запросов на сервер, снижая тем самым нагрузку.

Если у вас файл стилей иконочного шрифта лежит не в папке «CSS», а скажем в корне шаблона, то вам необходимо будет прописать правильные пути до файлов шрифтов иконок в файле «font-awesome.min.css». Если сложно ориентироваться в минимизированной версии, то можете подключить несжатую версию стилей.

Использование Font Awesome

Давайте рассмотрим, как можно применить иконки от Font Awesome на сайте. Вообще на официальном сайте есть руководство для начала работы, примеры реализации иконок, ну и сама база иконок, можно посмотреть какие иконки входят в набор. Если с английским туго, то можете воспользоваться русскоязычной версией сайта —http://Font Awesome.ru/get-started/.

Итак, для того, чтобы показать икону на сайте необходимо создать тег или и задать необходимые классы. Какие именно? Все зависит от того, какую иконку вы хотите вывести. Идем на официальный сайт в раздел с иконками «Icons» и выбираем необходимую иконку. Для удобства поиска все иконки подразделены на группы.

Илон Маск рекомендует:  Что такое код odbc_pconnect

Также можно воспользоваться поиском по ключевым словам. Слова следует вводить на английском, т. е. не транслитом, а именно значение слова на английском языке. Если туго с английским, то воспользуетесь гугл переводчиком.

Далее, щелкаем по иконке и попадаем на страницу иконки. Здесь нам в готовом виде уже предложен html-код данной иконки. Например…

Копируем и вставляем данный код в нужном месте на нашем сайте. Хотел бы отметить, что если вы захотите вставить иконку в статью через визуальный редактор, то некоторые визуальные редакторы могут вырезать данный тег при сохранении материала. В данном случае в настройках редактора нужно внести тег « » в список разрешенных тегов. Если не знаете как именно, то Гугл вам в помощь.

Итак, иконка у нас отобразилась. Что мы можем сделать с данной иконкой? Мы можем задать ей цвет через правило «color» в css, мы можем увеличить размер иконки, мы можем задать тень через правило «text-shadow», т. е. мы можем проделать через css все те манипуляции, что и для текста.

Примеры реализации Font Awesome

Если перейти на страницу «Exsamples» (примеры реализации) на официальном сайте, то мы можем увидеть дополнительные возможности, которые уже заложены разработчиками иконочного шрифта. Что это за возможности? Например, мы можем изменить размер иконки на один из предустановленных размеров. Для это просто необходимо дописать соответствующий класс.

Как видим у нас появился дополнительный класс у иконки, который отвечает за ее размер — fa-5x, или fa-4x и т.д.

Также мы можем задать анимацию иконке, добавив соответствующий класс. Например…

Здесь за анимацию отвечают классы — fa-spin и fa-pulse. Чем они отличаются можно посмотреть в примерах на официальном сайте.


Что еще можно сделать с иконками? Мы можем повернуть иконку. Для необходимого поворота также нужно добавить соответствующий класс.

Думаю здесь подробных комментариев не нужно. Например, класс «fa-rotate-90» отвечает на поворот иконки на 90 градусов по часовой стрелке.

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

Использование Font Awesome на компьютере

Теперь давайте разберем как можно использовать шрифт Font Awesome на компьютере, например, в программе Photoshop. Здесь все очень просто — устанавливаете otf-шрифт — Font Awesome.otf. Данный шрифт сможете найти в папке fonts после скачивания архива Font Awesome. Далее воспользуемся страницей-шпаргалкой, которую для нас создали разработчики. Найти вы ее сможете по адресу — http://fortawesome.github.io/Font-Awesome/cheatsheet/ — на официальном сайте, и также русско-язычная версия — http://Font Awesome.ru/cheatsheet/. Как советуют разработчики, сохраните данную страницу в формате PDF, чтобы она всегда была под рукой. Отсюда понадобится копировать иконки юникода. Чтобы отобразить иконку в программе Photoshop необходимо скопировать нужную иконку (именно выделить саму иконку, а не ее название) и вставить в нужном месте в макете. Появится символ прямоугольника с крестиком внутри. Выделяем его и применяем установленный ранее шрифт «Font Awesome Regular».

Наглядно показал на скриншотах, чтобы было понятно. Вот и все. Можете изменить данной иконке размер (размер шрифта), цвет, можете трансформировать, да и вообще проделать все те действия, что обычно применимы для обычного шрифта.

Это то, что касалось Font Awesome. Теперь давайте перейдем к такому сервису, как Fontello. Именно Fontello я использую для генерации шрифтов иконок. Есть у него свои нюансы, чего нет (по крайней мере я не нашел) в Font Awesome.

Fontello

Официальный сайт Fontello — fontello.com. Сайт на английском языке и к сожалению русскоязычной версии сервиса, как у Font Awesome я не нашел. Но интерфейс настолько прост, что в русском языке нет необходимости. Мне лично это не понадобилось.

Чем хорош данный сервис?

Fontello позволяет наиболее гибко работать с иконочным шрифтом. В чем выражается эта гибкость? В Fontello мы можем добавить в набор только те иконки, которые нам нужны. За счет этого файлы шрифтов иконок получатся легкими и не будут создавать дополнительную нагрузку. Также иконки от Fontello можно установить и внедрить в фотошоп, чтобы дизайнер работал именно с определенным набором иконок. Далее данный набор передается верстальщику и он внедряется в дизайн. Таким образом, работа облегчается во много раз.

Добавление иконок Fontello в набор

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

Весь набор выбранных вами иконок можно посмотреть во вкладке «Customize Names».

Удалить иконку из набора можно, щелкнув по крестику или кликнуть повторно по выделенной иконке во вкладке «Select Icons».

Также имеется еще одна вкладка под названием «Customize Codes». Здесь мы можем получить код иконки. Для чего нужен код иконки я расскажу ниже.

Вкладка «Help/Wiki» ведет на страницу проекта в Github, а именно на страницу документации. Правда здесь на английском. Кто знает английский может пройтись и по ней тоже, если станет что-то не понятно.

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

Стоит отметить, что в набор иконок мы можем загрузить и свою иконку. Для этого мы должны подготовить векторное изображение в формате SVG и загрузить в Fontello простым перетаскиванием в поле «Custom Icons». У меня, если честно, так и не получилось добиться хорошего качества кастомной иконки. Здесь скорее всего все зависит от качества самой иконки в SVG.

В поле «font name» мы можем ввести свое название имя шрифта иконок, например, «my-fonts-icons». Название следует вводить латинскими буквами (a-z) и маленькими буквами, а также можно использовать символы подчеркивания — «-» или «_». По умолчанию название — fontello. В архиве названия шрифтов и файлов стилей будут заменены вашим названием.

Когда набор готов мы можем скачать архив файлов иконок. Для этого кликнем по розовой кнопке «Download webfont» в правом верхнем углу. Обратите внимание, что нам сразу показывается количество иконок в наборе.

Сохраняем архив на компьютере и распаковываем. Давайте разберем, что лежит в архиве.

Папка «css» — в ней содержатся файлы стилей. Какой из них использовать читайте ниже.

Папка «font» — в данной папке хранятся шрифты иконок.

Файл «config.json» — файл настроек иконок. Вы можете импортировать обратно ваши иконки в Fontello и работать с ними дальше.

Файл «demo.html» — можно открыть демо-страничку собранных иконок посмотреть их в браузере.

Файл «LICENSE.txt» — файл лицензии, т.е. по какой лицензии распространяются иконки.

Файл «README.txt» — краткая документация на английском языке по использованию иконок Fontello

Подключение иконок Fontello

Иконки от Fontello подключаются практически также как и Font Awesome. Из набора иконок сначала мы подключаем файлы/файл стилей, их несколько. Почему так много? Давайте разберем каждый файл (названия файлов стилей шрифтов указаны по умолчанию).

fontello.css — основной файл стилей fontello

animation.css — данные стили отвечают за анимацию иконок, т.е. нужно, если вы используете анимированные иконки в наборе.

fontello-codes.css — в данном файле стилей содержатся только коды иконок. Это удобно, когда ваши иконки часто обновляются. Вы просто заменяется данный код на код из нового архива иконок файла fontello-codes.css.

fontello-embedded.css — стили со встроенным шрифтом WOFF. Его необходимо использовать, если хотите избежать проблем с CORS в Firefox и IE9, а также если ваши иконки хранятся на отдельном домене. Честно сказать, этим не пользовался. Конкретно сказать не могу.

fontello-ie7.css — основной файл стилей иконок для поддержки браузером ИЕ7

fontello-ie7-codes.css — коды иконок с поддержкой браузера ИЕ7

От себя хочу сказать, что стили для поддержки ИЕ7 я не использую, т.к. данный браузер уже устарел. Вообще для старых браузеров я ставлю заглушку.


Итак подключаем основной файл стилей (название файла стилей указано по умолчанию) в главном шаблоне сайта (обычно это index.php):

Далее рассмотрим как использовать иконки в шаблоне сайта.

Использование иконок Fontello в шаблоне сайта

Для того, чтобы отобразить иконку в шаблоне нам необходимо добавить соответствующий класс тегу i или span. Можно конечно и div, но лучше будет использовать теги span или i. Какой добавить класс? Идем на сайт fontello и переключаемся во вкладку «Customize Names». Здесь мы видим иконки и справа названия классов. Копируем класс и назначаем его тегу с иконкой.

Теперь давайте давайте разберем как назначить иконку элементу в который мы не можем добавить html-код иконки. Например, элемент выводится через javaScript, а сам код минимизирован. Можно конечно разжать код, найти это место, где создается необходимый элемент и вставить в него тег иконки, но это все долго и муторно. А если вы еще в javaScript не бум бум, извините за выражение… Это можно сделать посредством стилей, к стилям то мы всегда доступ имеем )). Вот этим мне и нравится Fontello. Итак, чтобы добавить иконку элементу необходимо создать псевдоэлемент этого элемента и вывести через правило «content» иконку. Давайте покажу на примере. У нас есть пункт меню:

Давайте в тег «a» добавим иконку. Для начала данному тегу назначим иконочный шрифт fontello (названия файлов шрифтов указаны здесь по умолчанию) через правило «font-family». Код css будет следующим:

Далее создаем псевдоэлемент тегу «a» и выведем иконку, передав через правило «content», соответствующий код иконки. Чтобы узнать код иконки достаточно открыть общий файл стилей иконочного шрифта — fontello.css и ниже, там, где идут коды иконок найти иконку с нужным классом. Я, к примеру, возьму иконку с классом «icon-camera-alt». Данная иконка присутствует в моем наборе. Ищем в кодах класс «.icon-camera-alt::before» и копируем правило «content» вместе с кодом.

В итоге код будет следующим:

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

Также код иконки можно получить и на сайте Fontello. Переключитесь во вкладку «Customize Codes». В данной вкладке указаны иконки вашего набора с кодами для вывода. Вы можете переопределить свой код при необходимости. Но это необходимо сделать перед загрузкой набора.

Если взять первую иконку, то в css вывод иконки будет следующим:

Использование иконок Fontello в Photoshop.

Для того, чтобы использовать иконки Fontello в фотошоп нам необходимо сначала установить иконочный шрифт в нашу операционную систему. Но прежде чем это сделать нам необходимо выполнить небольшую настройку в Fontello.

Перед загрузкой архива с иконками щелкаем по иконке настройки и выбираем в списке «Advanced font settings…». Далее в модальном окошке настроек переключаемся в пункте «Encoding» с «Private Use Area» на «Text characters», сохраняем. Качаем архив со шрифтами и распаковываем на компьютере.

Далее из папки «font» находим шрифт с расширением «.ttf» и устанавливаем его в ОС. Шрифт лучше установить так, как описано в данной статье. Не поленитесь почитать. Теперь в самом фотошоп ситуация обстоит также как и в случае с Font Awesome — копируем символ иконки и вставляем в макет, выбираем шрифт для символа (появившийся прямоугольник с крестиком) — fontello Regular (это в моем случае, т.к. шрифт у меня идет по умолчанию, у вас он может быть с вашим именем). Только, где скопировать саму иконку в юникод? Идем все в ту же вкладку «Customize Codes» и копируем символ иконки для фотошоп.

Вот, что у меня получилось:

Импорт иконок обратно в Fontello

Может такое случится, что вам придется добавить новые иконки в набор. Выбранные вами иконки на сайте fontello конечно сохраняются какое то время. Но если вы очистите кеш браузера или создадите новый набор, то предыдущий вернуть не получится и придется собирать заново, а это в свою очередь не очень удобно. Разработчики учли это и добавили функционал импорта иконок.

Если помните в архиве у нас лежал файл «config.json». Так вот в данном файле хранятся все созданные нами иконки. Чтобы сделать импорт нам следует перейти на сайт fontello, кликнуть по значку настроек и выбрать «Import».

Далее находите файл config.json у себя на компьютере и выбираете его. После этой операции вы увидете свой набор иконок.

Важно! Советую загружать на сайт вместе с файлами стилей и шрифтов иконок еще и файл настроек, чтобы вы в любой момент могли изменить набор. Если ваш набор часто обновляется, то не забывайте из архива обновлять и файл настроек.

Из предложенных ссылок иконочных шрифтов присутствовал также сервис icomoon.io, но про него писать я не буду, т.к. статья итак получилась большой. Но если вы разберетесь в Font Awesome и Fontello, то уверен, что и Icomoon вам освоить будет несложно.

Напоследок хочу сказать, если вам интересно посмотреть на сайты, где используется иконочный шрифт, то можете обратить внимание на данный блог. Здесь я как раз применил иконки от Fontello.

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

Всем удачи, всем пока.

Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Теги HTML для работы со шрифтами: font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

В прошлых статьях, мы с вами начали изучать HTML на примере простенькой странички.

В этом посте речь пойдёт о тегах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.

#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.


Можно также использовать имена цветов на английском red , green , black , yellov , indigo , orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый) . Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга body .
Например:

Прекрасные шрифты посредством @font-face

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. снимает вводя поддержку это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Илон Маск рекомендует:  head в HTML

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию Вот пример:

Копнём чуть поглубже

Сегодня бóльшей частью шрифтовые семейства состоят всего из четырёх начертаний: обычное, полужирное, курсивное и полужирное курсивное. Чтобы дать определение каждому из этих начертаний, используются дескрипторы Они задают стиль начертания; принципы каскадности и наследования к ним здесь не применяются. Не будучи задан явно, каждый из них по умолчанию обретает значение «normal»:

Текст примера показан ниже отображённым при помощи этого шрифтового семейства:

Есть особенность, которую нетрудно проглядеть: дозволяет создание семейств с бóльшим количеством начертаний, нежели просто обычное и полужирное — внутри единого семейства можно определить до девяти значений жирности. Это справедливо даже для Windows, где внутренние недостатки платформы обыкновенно ограничивают шрифтовые семейства только обычным и полужирным значением жирности. Существующие шрифты, подобные японскому проекту (с открытым исходным кодом), обладают аж семью жирностями. В качестве примера приведём выборку их:

В некоторых обстоятельствах авторы могут предпочесть использование шрифтов, доступных читателю локально, а скачивать шрифты только тогда, когда соответствующие начертания недоступны. Это возможно, если использовать «local()» при задании дескриптора «src» во правиле Браузер последовательно станет пробовать элементы списка шрифтов из дескриптора «src», покуда успешно не закачает желаемый шрифт.

Вот скриншот, показывающий сверху вниз итоги отображения в Mac OS X, Windows и Linux простого примера, использующего определённое выше шрифтовое семейство:

Шрифтовое семейство Helvetica Neue имеется в большинстве систем Mac OS X, однако обычно отсутствует на машинах Windows и Linux. Когда тутошний пример отображается на Mac OS X, используются локальные начертания Helvetica Neue, и никакой шрифт не скачивается. Под Windows и Linux попытка загрузить локальный шрифт терпит неудачу, и подстановочный шрифт (MgOpen Moderna) скачивается и используется вместо того. MgOpen Moderna планировался как замена Гельветике, так что отображается он похожим на Helvetica Neue. Таким способом автор может обеспечить желаемый облик текста, но избежать скачивания шрифта, когда в том нет нужды.

Имя, используемое для отсылки к конкретному начертанию шрифта — это полное имя отдельного шрифта. Обыкновенно это имя семейства плюс название стиля (например, «Helvetica Bold»). В Mac OS X имя показывается на информационной панели для указанного начертания. Выделите одно начертание и выберите «Show Font Info» из меню «Preview» в FontBook:

Подобные инструменты существуют и под Linux. Под Windows используйте расширение свойств шрифта, свободно скачиваемое от Microsoft средство просмотра этих имён. Когда расширение установлено, панель свойств показывает сведения об отдельном шрифте. Полное имя указывается как «Font Name» на вкладке «Name»:

Safari под Mac Os X поддерживает поиск только по именам PostScript, так что имена Postscript под Mac OS X также поддерживаются. Для шрифтов OpenType PS (обыкновенно помечаемых полное имя совпадает с постскриптовым именем под Windows. Так что для этих шрифтов авторам рекомендуется указывать как полное имя, так и постскриптовое, и тем достигнуть кросс-платформенной работоспособности.

Поддержка многих языков

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

Языкам, подобным арабскому, требуется такое изменение формы текста, при котором на отображение заданного символа влияют символы, его окружающие. Различные платформы используют различные технологии отрисовки, чтобы сделать изменение формы текста возможным; под Mac OS X необходимы шрифты AAT, в то время как под Windows и Linux необходимы шрифты OpenType. При отсутствии шрифта в формате, необходимом данной платформе, изменение формы текста не окажется отображённым правильно.

Под Mac OS X скачивается шрифта. На Windows и Linux, где отрисовка не поддерживается, скачивание пропускается, и шрифт OpenType используется вместо него. Стало быть, текст отображается правильно на всех платформах.

Междусайтовое использование шрифта

По умолчанию Firefox 3.5 дозволяет шрифтам скачиваться только для страниц, полученных с того же сайта. Это предотвращает свободное и бесплатное использование сайтами шрифтов, обнаруженных на других сайтах. Для тех сайтов, которые явственно желают дозволить междусайтовое расшаривание шрифтов (например, для онлайновой библиотеки шрифтов), Firefox 3.5 поддерживает употребление заголовков контроля доступа, управляющих таким поведением. Добавляя дополнительный заголовок к заголовкам HTTP, посылаемым со шрифтовыми файлами, сайты могут сделать междусайтовое использование возможным.

Когда включён этот заголовок HTTP, любая страница получает доступ ко шрифтам этого сайта, а не только страницы с того же сáмого сайта.

Проблемы лицензирования шрифта

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

«Я нашёл бесплатный шрифт, можно ли использовать его на моём сайте?»

Возможно; а возможно и нет. Некоторые бесплатные шрифты распространяются в качестве рекламных зазывных продуктов (чтобы поощрить ко приобретению их) — и их не дозволяется распространять самостоятельно или выкладывать на сервере в Паутине. Проверяйте лицензию, даже у бесплатных шрифтов.

«Я просто хочу использовать [здесь вставьте название любимого шрифта] на моём сайте. Это возможно?»

Прямо сейчас, скорее всего, нет. Использование прицепленных шрифтов в Паутине едва народилося. Бóльшая часть шрифтов, нынче идущих с собственническими операционными системами, имеют лицензии, ограничивающие их употребление стандартными десктопными приложениями, так что накачивание этих шрифтов на вебосервер, почти наверняка, не дозволяется. В прошлом шрифтопроизводство немало бедствовало от пиратства, так что большинство шрифтопроизводителей насторожённо относятся к дозволению использовать их шрифты за пределами сравнительно ограниченных контекстов. Многие поставщики шрифтов сосредоточилися на нуждах печатной промышленности, что нередко отражается и на сравнительной сложности их лицензий. В будущем некоторые дизайнеры шрифтов могут прийти к умозаключению, что продажи шрифтов в качестве шрифтов Паутины превзойдут любой потенциальный ущерб продажам от пиратства, а другие могут и не прийти к такому умозаключению. Лицензионные соглашения их отразят выбор их, и к ним следует отнестись с уважением.

Рынок продаж фотографии нередко называют двухбиллионным, а рынок шрифтов Паутины ещё близок к нулю, так что он может только возрастать!

Прицепление шрифтов в Internet Explorer

Прицепление шрифтов давно возможно в Internet Explorer, но только шрифтов в собственническом формате шрифта EOT. Есть единственный способ создания воспользоваться майкрософтовским инструментом WEFT, доступным только на Windows. Только шрифты TrueType и OpenType TT могут быть преобразованы в формат EOT, а шрифты использоваться не могут.

Во правилах @font-face браузер Internet Explorer воспринимает только дескрипторы и src, так что каждое семейство может содержать только одно начертание. Он не понимает указания format() и проигнорирует любое правило содержащее такие указания. Это поведение можно использовать, чтобы задействовать прицепление шрифта

Грядущая работа

В Firefox 3.5 дескрипторы font-stretch и unicode-range не поддерживаются. Шрифты, определённые в документах SVG, также ещё не поддерживаются. Рассматривается внедрение их в будущих выпусках Файерфокса. Как всегда, патчи приветствуются!

Что такое иконочный шрифт и как применить его на сайте?

Иконочный шрифт – это просто шрифт, который вместо букв содержат символы. Их можно оформить с помощью CSS примерно так, как обычный текст.


Иконочные шрифты появились и стали популярны после распространения мобильных устройств.

Ведь, чем меньше экран, тем меньше должны быть значки на нем. Кроме того, значки должны быть масштабируемыми. Иконочные шрифты идеально соответствуют этим требованиям.

А ведь иконки, это не просто кнопки социальных сетей, этот один из важных элементов сайта, которые позволяют сделать его дизайн стильным.

Представьте себе, что на вашем сайте все иконки — страниц, категорий, количества комментариев, количества просмотров, обозначение времени, а также, социальные кнопки выполнены в одном стиле!

Ранее, когда использовались рисованные картинки, их нужно было заказывать дизайнеру или искать бесплатные. А как сложно было подобрать эти картинки с учетом размера, цвета и стиля!

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

Такие шрифты позволяют минимальными усилиями оформить свой сайт в одном стиле.

Плюсы иконочных шрифтов по сравнению с изображениями:

  1. К ним можно применить любое свойство CSS: указать размер, цвет, фон, тень, градиент, псевдо-классы :hover, :focus — оформить, как угодно.
  2. Их можно анимировать.
  3. Они масштабируются – их можно уменьшать или увеличивать без потери качества, поэтому они корректно отображаются, как на стандартных, так на Retina-дисплеях.
  4. По сравнению с графикой, они быстрее загружаются.
  5. Для загрузки иконочных шрифтов браузер посетителя отправит один HTTP запрос, что выгодно отличает их от загрузки рисованных иконок. Чем меньше картинок на сайте, тем меньше запросов к серверу, а значит, скорость загрузки ваших страниц будет быстрее.
  6. Они поддерживаются всеми браузерами (даже очень старыми версиями).

Иконочные шрифты включают большие наборы иконок различной тематики. Таких шрифтов существует очень много – достаточно ввести в поиск слова «icon font», чтобы получить как минимум десяток.

Содержание:

↑ 1. Обзор иконочных шрифтов начнем с Dashicons wordpress

Многие пользователи wordpress не знают, что он содержит пакет иконок Dashicons (начиная с версии 3.8), включающий около 150 векторных иконок 15и категорий:

1. Admin Menu;
2. Welcome Screen;
3. Post Formats;
4. Media;
5. Image Editing;
6. TinyMCE;
7. Posts Screen;
8. Sorting;
9. Social;
10. WordPress.org Specific: Jobs, Profiles, WordCamps;
11. Products;
12. Taxonomies;
13. Widgets;
14. Notifications;
15. Misc.

Конечно, 150 иконок – это не так много, но среди них могут найтись нужные вам.

Как подключить Dashicons?

Вставьте в низ файла functions.php вашей темы этот код:

function my_dashicons() < wp_enqueue_style( 'dashicons' ); >add_action( ‘wp_enqueue_scripts’, ‘my_dashicons’ );

Dashicons можно использовать в HTML коде при помощи классов dashicons и dashicons-*:

Выберите здесь подходящую иконку и нажмите на нее.

Она появится в верхней части страницы, а рядом вы увидите название классов этой иконки, например «dashicons-facebook».

Откройте тот файл, куда вы планируете ее добавить, например, для иконок социальных сетей это будет файл single.php, и вставьте следующую конструкцию (после функции the_content();):

После сохранения страницы с постом, вместо span появится иконка соц.сети Facebook. Ее стандартный размер по умолчанию 16×16 пикселей, но его можно увеличить с помощью CSS.

Так же легко можно создать иконки других соц. сети, например Google+ или Twitter:

Вот, что у нас получилось:

В качестве ссылки укажите адрес вашей страницы в этих социальных сетях.

Вы, также, можете добавить Dashicons к вашим элементам с помощью селектора :before в CSS:

К каждой иконке нужно добавить свой класс, а в параметр content для него вставить код, который указан под иконкой на сайте https://developer.wordpress.org/resource/dashicons/

Иконочному шрифту можно задать любой цвет, добавив параметр color, например так:
color: #237DA5;


А также придать любой вид, например, такой:

Но, это уже тема отдельного поста.

Dashicons wordpress удобны тем, что они уже встроены в движок, но пока выбор их не велик.
Мне больше нравится иконочный шрифт FontAwesome – официальный сайт http://fontawesome.io/ или русская версия сайта http://fontawesome.ru/ .

↑ 2. Иконки Font Awesome

Изначально они были предназначены для фреймворка Twitter Bootstrap, но затем разработчики решили, что их можно использовать отдельно.

Шрифт Font Awesome содержит около 360 иконок и регулярно пополняется новыми.

Иконки разбиты на группы:

  1. Веб-приложения.
  2. Валюты и деньги.
  3. Текстовые редакторы.
  4. Указатели.
  5. Видео-плееры.
  6. Бренды.
  7. Медицинская тематика.

Как подключить Font Awesome?

Вариант 1. Можно вставить прямую ссылку на шрифт в файл header.php, между тегами head — /head:

Вариант 2.Можно скачать шрифт Font Awesome с официального сайта, загрузить на свой сайт, указав путь к папке со шрифтом на вашем сервере:

Вариант 3: А самым правильным будет подключить Font Awesome в файле functions.php:

В данном примере указан путь к папке «font-awesome», которая находится в папке темы.

Как использовать Awesome Icons?

Перейдите на сайт http://fontawesome.io/icons/ и выберите подходящую вам иконку.

Кликните по ней, после чего, откроется ее страница.
Например, мы выбрали Awesome Icons для комментариев — http://fontawesome.ru/icon/comments/

Скопируйте ее код — в данном случае, это будет:

и вставьте в нужное место на своем сайте.

Как увеличить размер Font Awesome?

Для увеличения размеров иконок используются классы:

fa-lg (увеличение на 33%),
fa-2x (в 2 раза),
fa-3x (в 3 раза),
fa-4x (в 4 раза),
fa-5x (в 5 раз).

Применительно к нашему примеру:

fa-lg fa-2x fa-3x fa-4x fa-5x

Вот, что получилось:

Больше примеров смотрите на странице http://fontawesome.ru/examples/ .
Font Awesome иконки, так же как и Dashicons полностью бесплатны.

↑ 3. Плагины, помогающие добавить иконочные шрифты на сайт

И напоследок, пара полезных плагинов, которые помогут автоматизировать процесс:

Widget Icon: Содержит 640+ красивых шрифтовых иконок, предназначенных для Twitter Bootstrap.

Вы можете просто выбрать библиотеку шрифтов и иконку и отобразить ее в любом месте вашего WordPress сайта.

Font Awesome Menus: Позволяет добавить шрифтовые иконки в ваше меню WordPress, а также в посты и на страницы.

Шрифт с иконками Font Awesome. Примеры, как установить

В этой статье я максимально просто и доступно расскажу о том, что такое шрифт с иконками Font Awesome, как его установить и объясню несколько примеров применения.

Что такое шрифт Font Awesome?

Шрифт Awesome нужен для того, чтобы использовать иконки, не загружая при этом на сайт какие-либо изображения (подборки иконок и тд). Данный шрифт (в версии 4.1) включает в себя 441 иконку, которые становятся доступны при применении класса конкретной иконки для элемента. Но об этом позже. Ниже Вы можете увидеть малую часть примеров иконок:

Плюсы шрифта
— Бесплатно
— Простой доступ через CSS
— 441 иконка (в версии 4.1)
— Работает в IE
— Масштабируемость
— Отлично отображается в читалках и i-технике!
— Многие дизайнеры уже оценили и используют шрифт!

Как установить шрифт Font Awesome (с иконками)?

1. Скачиваем шрифт с сайта http://fontawesome.io/ . Весит немного, примерно 400 Кб.

2. Копируем распакованные файлы в Ваш проект (например, где индексный файл). По названиям файлов скорее всего совпадений не будет с уже имеющимися, так как названия у них достаточно специфические.

3. Подключаем файлы в head Вашего проекта. Предлагаю два варианта — если лежит выше по директории и если в одной.

4. Используем шрифт. Смотрим пример ниже:

Примеры шрифт Font Awesome

Допустим идёт проработка каких-либо действий по списку:

font awesome Как использовать шрифт только для одного символа (иконки)

Primary tabs

Forums:

  1. вытащить определяния @font-face главного CSS (из CND)
  2. залить шрифты из архива фонт-аверсама в доступную из веб-а папку
  3. определить @font-face в своём CSS, переделав начало тех путей, что мы взяли в первом пункте
  4. определить свой стиль для иконки

Например для иконки телеграма:

— задействуем оба шрифта поочереди. Код f2c6 взят из веб-инспектора для работающего аверсама в режиме обычного подключения css из CDN.

Когда это полезно

Когда у вас уже есть дизайн рассчитанный на line awesome, но в этом шрифте нет подходящей иконки.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL