Font awesome cdn google: font-awesome — Libraries — cdnjs

Leave a Comment / Разное / By /

Содержание

Чудесный шрифт (awesome font CDN)

Блог / Программирование / Шрифты / Чудесный шрифт (awesome font CDN)

Идея пиктографических шрифтов эксплуатируется уже давно. Взять хотя бы фреймворк css bootstrap. Соль в том, что мы работаем с векторными рисунками. Они идеально вписываются в любой масштаб вашего HTML шаблона, а браузер производит рендер без лишней «пиксилизации» на мониторах с высоким разрешением.

Awesome — это не только шрифт, но и уже готовые каскадные стили, которые помогают быстро встроить нужные иконки в нужном виде в нужное место 🙂

Откройте для себя проект Font AWESOME.

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

С чего начать?

Интегрировать в свой проект и начать использовать — проще простого. Не нужно ничего скачивать, настраивать пути, писать свои стили и т.п. Забудьте о рутине 🙂

Зайдите в раздел проекта:

http://fontawesome. io/get-started/

http://fontawesome.io/get-started/

Укажите свой email — вам пришлют HTML код для вставки в заголовочную секцию вашего сайта, примерно вот такого вида (всего одна строка, Карл!):

<script src=»https://use.fontawesome.com/aa2391fb57.js»></script>

<script src=»https://use.fontawesome.com/aa2391fb57.js»></script>

Теперь вы можете использовать готовые стили для вставки иконок (675 векторных изображений в текущей версии!) в ваш HTML документ.

Изменяем цвет

Т.к. это шрифт, то цвет иконки зависит от CSS стиля шрифта

.red-icon { color: #f00; }

.

red-icon {

  color: #f00;

}

Изменяем размеры

Размеры как и цвет, зависят от стиля CSS шрифта (font-size). Есть набор предустановленных стилей для задания размера иконки:

А так же подготовлены для использования:

  • CSS для создания наложения нескольких иконок,
  • стили для создания анимации иконок (например, вращения),
  • и многое другое…

Примеры использования можно посмотреть в соответствующем разделе.

Поддержать развитие

Если у вас в силах поддержать развитие проекта FONT AWESOME, то сейчас идет сбор на следующую версию Font Awesome 5 на кикстартере.

Вообще то они давно уже собрали необходимые 30,000$, так что можете просто порадоваться за разработчиков. 🙂

Шрифты

Написать комментарий

Данная запись опубликована в 23.11.2016 18:25 и размещена в Программирование. Вы можете перейти в конец страницы и оставить ваш комментарий.

 

Комментарии к «Чудесный шрифт (awesome font CDN)»

Понравилась статья? Есть вопросы? — пишите в комментариях.

Установить вручную | Font Awesome Docs

В этой документации описывается настройка WordPress путем добавления кода PHP в файл functions.php вашей темы. Он предназначен для более продвинутых пользователей WordPress, которые знают, почему использование нашего плагина — не лучшее решение в их ситуации.

Если вы просто пытаетесь настроить Font Awesome в WordPress самым простым способом, со всей уже встроенной магией, тогда используйте вместо этого наш плагин WordPress.

Перед началом работы

Чтобы использовать эти фрагменты кода, вы должны иметь возможность отметить все эти поля:

  • У меня есть доступ на запись к файлу functions.php моей темы WordPress.
  • Я знаю, как внести изменения в файл functions. php моей темы.
  • Мне приятно внести несколько простых изменений в код, чтобы набрать его.

CDN и комплект

Эти примеры и фрагменты кода предлагают два разных подхода к настройке Font Awesome в WordPress: с наборами и без наборов. Подход «без комплектов» упоминается в этих примерах как «CDN» в основном по устаревшим причинам. А именно, до того, как у нас появились комплекты, можно было либо разместить ресурсы значков самостоятельно (самостоятельное размещение), либо загрузить их из нашей бесплатной или профессиональной CDN. Затем мы добавили комплекты, которых и , поддерживаемые CDN.

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

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

Предлагаются альтернативы «CDN», потому что иногда бывают случаи, когда загрузка ресурсов Font Awesome непосредственно из CDN предпочтительнее загрузки комплекта. Но если вы не уверены, что у вас есть такой вариант использования, то это довольно хороший ключ к тому, что настройка комплекта — ваш лучший выбор.

Настройка комплекта

Сначала мы заложим основу с помощью этой функции, которую вы будете вызывать с помощью кода комплекта. Если вы не кодер, не волнуйтесь. Вероятно, вам никогда не понадобится изменять код этой функции. Вы только настроите более простой код ниже, чтобы добавить свой токен Kit. Вот так. Скопируйте и вставьте это в свой functions.php :

Далее вам нужно будет добавить следующий код, также в ваш functions.php, заменив 42deadbeef.js вашим реальным токеном Kit, который вы можете найти в настройках Kit.

Настройка SVG с CDN

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

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

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

ОК, теперь скопируйте этот фрагмент и вставьте его в свой functions.php :

Загрузить все стили

Используйте средство выбора CDN, чтобы выяснить, какие URL CDN и ключи целостности вы хотите использовать. Убедитесь, что вы выбрали «SVG».

Например, если вы выберете «Все» для Font Awesome Free версии 5.15.4, вы получите следующее:

Вот соответствующий код PHP для копирования и вставки в ваш functions.php :

Первый аргумент функции соответствует атрибуту src из элемента Самая распространенная проблема, с которой мы сталкиваемся при использовании WordPress из-за популярности Font Awesome , заключается в том, что сайт WordPress имеет тему и любое количество плагинов, каждый из которых устанавливает свою собственную версию Font Awesome. В конечном итоге они конфликтуют друг с другом, приводя к запутанным результатам.

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

Заложить основу

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

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

Теперь скопируйте следующий код в свой functions.php , после приведенного выше кода, добавив хэш md5 в этот «черный список» для каждого конфликта, который вы хотите удалить с помощью приведенного выше кода.

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

  • 7ca699f29404dcdb477ffe225710067f — это хэш содержимого файла font-awesome.css версии 4.7.0.
  • 3c937b6d9b50371df1e78b5d70e11512 — это хэш строки: https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.css . Это обычный URL CDN для загрузки Font Awesome 4.7.0.

Добавление совместимости с версией 4

Если конфликты, которые вы удаляете, включают Font Awesome версии 4, а ваша тема или подключаемые модули ссылаются на значки по именам, которые изменились между версиями 4 и 5, вам нужно будет проделать немного больше работы, добавив прокладки v4. То, как вы это сделаете, будет зависеть от того, каким образом вы пытаетесь настроить Font Awesome:

  • С комплектом: совместимость с v4 встроена (с некоторыми дополнительными ингредиентами для гурманов, которых нет в других рецептах, совместимых с v4). Поэтому настройте свой комплект в WordPress), а затем в настройках комплекта включите совместимость с v4. Супер-легко. Каковы дополнительные ингредиенты для гурманов, спросите вы? Это еще одна длинная история.
  • Без комплекта: следуйте инструкциям по загрузке прокладок v4 с помощью SVG или Webfont, в зависимости от выбранной вами технологии.

Поймите решение

Что эти конфликтующие элементы, которые вы здесь удаляете?

Это элементы