Как подключить шрифты в less

Как создать свою less тему в yootheme pro на основе существуюшей?

В чем преимущество использования less файла, вместо custom.css?

1. Вместо двух файлов при переходе на ваш сайт будет грузиться только один.

2. Файл будет минимизирован.

3. Доступ к внутренним переменным темы yootheme (их можно будет использовать в своих CSS правилах).

4. Не все параметры темы доступны для изменения через веб интерфейс. Некоторые доступны только через переменные less.

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

6. Можно полностью избавиться от обращения к CDN гугл и Google fonts.

Как же создать свой less файл на основе выбранной темы yootheme?

Переопределение файлов yootheme pro

Как переопределять различные файлы в темах yootheme pro подробно описано в их документации и обычно не вызывает никаких проблем.

Все что требуется — это создать новую папку в каталоге templates с именем yootheme_child . Можно придумать свое название, которое вам будет по душе — например yootheme_my или yootheme_mysite. Главное условие — название папки должно начинаться со слова yooteheme, а затем идет символ подчеркивания и ваше слово.

Честно говоря, особого смысла придумывать свое название я не вижу, так как чаще всего папка оказывается всего одна и как-то особо ее называть смысла нет. Поэтому с некоторого времени все папки у меня называются одинаково — yootheme_child (так же как в примерах кода yootheme).

Обратите внимание — папка создается не внутри папки yootheme (!), а на одном уровне с ней.

После того как вы создали нужную папку — не забудьте проследовать в настройки -> дополнительно -> child theme и выбрать свою папку.

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

Для меня практически обязательным является создание папки CSS и создание в ней файла custom.css. Это позволяет добавлять свои кастомные правила css на свой сайт по своему вкусу. Чаще всего этого вполне хватает, для того чтобы вносить любые правки и изменения в оформление сайта.

Можно также переопределять файлы index.php, header.php и все другие, которые вам могут понадобиться.

Переопределение файла ошибки 404

Можно так же переопределить файл error.php и создать свою кастомную страницу для 404 ошибки.

При копировании этого файла учтите что его понадобится немного изменить — следующие строки понадобится удалить:

// prefer child theme’s error.php if (isset($params[‘child_theme’]) && file_exists($file = $directory . ‘_’ . $params[‘child_theme’] . ‘/error.php’))

Если этого не сделать — ничего работать не будет.

Что делать если шрифты Google нужно перенести на свой сервер?

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

Шаблон yootheme pro умеет компилировать less файлы и затем минимизировать полученный файл, уменьшая таким образом его размер. Поэтому логично хранить все свои кастомные изменения не в отдельном файле custom.css, а добавлять их в файл выбранной темы yootheme pro чтобы все в итоге попадало в один файл и уменьшало время загрузки сайта.

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

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

Теперь перейдем к основному вопросу статьи:

Как создать переопределение для less файла основной темы yootheme pro?

Следует отметить, что документация yootheme в данном вопросе вводит в заблуждение. Может быть они ее поправят в новой версии сайта, но пока она не соответствует современной действительности.

Дело в том, что с некоторой поры, помимо основной темы у yootheme появились и цветовые вариации. Вопрос переопределения цветовой вариации в документации никак не освещается. Мало того — существующие рекомендации далеки от тех, которых следует придерживаться. Так как же подключить выбранную цветовую вариацию темы и притом сделать так, чтобы при обновлении темы ничего не стерлось и не поломалось?

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

Итак, я с вами делюсь окончательным алгоритмом по созданию своей less темы на основе выбранной у yootheme и нужной цветовой вариации.

Вначале, в папке yootheme_child мы создаем папку less.

Идем в папку less папки yootheme и выбираем файл нашей темы.

Предположим вы выбрали тему Joline и цветовую вариацию этой темы White Green. Что нам надо сделать?

1. Копируем файл /templates/yootheme/less/theme.joline.less в файл /templates/yootheme_child/less/theme.joline.less

2. Теперь надо переименовать файл /templates/yootheme_child/less/theme.joline.less во что-то другое по своему усмотрению. Замените слово joline на что-то свое. Можно заменить на child. Получаем -> /templates/yootheme_child/less/theme.child.less

3. Теперь в самом файле /templates/yootheme_child/less/theme.child.less нужно в третьей строке в комментарии поменять название темы на наш вариант. В данном случае — Child.

4. Так как из-за переноса файла изменятся пути импорта, их тоже надо изменить.
Вместо @import «platform.less»; пишем @import «../../yootheme/less/platform.less»;
Вместо @import «theme.less»; пишем @import «../../yootheme/less/theme.less»;

// UIkit Core @import "../vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../vendor/assets/uikit-themes/master/_import.less"; @import "../vendor/assets/uikit-themes/master-joline/_import.less";

// UIkit Core @import "../../yootheme/vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../../yootheme/vendor/assets/uikit-themes/master/_import.less"; @import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less";

Не надо тупо копировать эти строки — обратите внимание — там присутствует имя выбранной темы!

Просто замените ../ на ../../yootheme/ перед именем файла.

5. Не забудьте изменить путь файлу стилей — вместо

@import (optional) "../vendor/assets/uikit-themes/master-joline/styles/@.less";

@import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@.less";

6. Если вам нужно избавить от google fonts то добавьте в конце файла еще вот такую строку:
@internal-fonts: ;

Итак, в результате мы получили вот такой вот файл theme.child.less :

/* Name: Child Background: White Color: Beige Type: Flat Style: white-salmon Name: White Salmon Background: White Color: Red Type: Flat Style: white-green Name: White Green Background: White Color: Green Type: Flat Style: light-green Name: Light Green Background: Light Color: Green Type: Flat Style: light-pink Name: Light Pink Background: Light Color: Pink Type: Flat Style: black-pink Name: Black Pink Background: Black Color: Pink Type: Flat */ // Platform @import "../../yootheme/less/platform.less"; // UIkit Core @import "../../yootheme/vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../../yootheme/vendor/assets/uikit-themes/master/_import.less"; @import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less"; // Theme @import "../../yootheme/less/theme.less"; // // Variables // @theme-headerbar-top-border-width: @global-border-width; @theme-headerbar-top-border: @global-border; .tm-headerbar-top + .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a::before 
when (@navbar-nav-item-line-mode) and (@navbar-nav-item-line-position-mode = top) 
 < top: -@theme-headerbar-top-border-width; >// Style @import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@.less"; @internal-style: ; @internal-fonts: ;

Комментарии удалять из него не нужно! Они используются yootheme pro для выбора цветовой вариации темы.

Теперь осталось зайти в yootheme pro и выбрать созданную нами тему с нужной цветовой вариацией:

Если вы хотите избавиться от шрифтов гугл и любого обращения к их CDN — обратите внимание на один нюанс — не забудьте удалить cyrillic (если вы его ставили) в поле «языки». Иначе вы долго будете искать причину, по которой не удаляется обращение к CDN Google.

Затем вам понадобится заменить все имена гугл шрифтов на свои. Например я просто добавляю слово local. И вместо Roboto у меня получается имя шрифта Roboto local.

На всякий случай объясню как добавлять свое кастомное имя шрифта — в поиске при выборе шрифта нужно просто набрать свое имя и затем нажать Enter (это имеется в подсказке, но кто же ее читает. ). Немножко путает первоначальное название поля — «поиск». Кто бы мог подумать, что туда можно вбить свое название шрифта и затем его использовать!

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

Лучше всего размещать шрифты в папке fonts в родительской папке yootheme_child.

Благо, есть сервисы, которые сильно упрощают процесс скачивания и получения нужных правил CSS. (например вот этот — https://google-webfonts-helper.herokuapp.com/fonts/)

Этот сервис как раз по умолчанию предполагает размещение шрифтов в папке fonts. Поэтому единственное, что потребуется подправить — наименование самого шрифта (вместо Roboto поставить Roboto local).

после смены получается

/* roboto-regular - latin */ @font-face < font-family: 'Roboto local'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v18-latin-regular.woff') format('woff'); >

Я надеюсь, что вы не забыли поставить галочку при выборе языка для шрифта?

Перекомпиляция less темы

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

Свои дополнения в созданный less файл можно добавлять в нужное вам место. Можно в конце или в начале (но после комментариев).

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

Полезный ресурс для скачивания на свой компьютер выбранного вами шрифта из сервиса гугл — https://google-webfonts-helper.herokuapp.com/fonts/

P.S. Возможные трудности и пути их решения

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

1. Слишком короткая сессия в Joomla

В джумла по умолчанию предусмотрено, что если вы бездействуете более 15 минут — вас разлогинет. Причем, находясь в yootheme pro вы этого даже не заметите. Просто перестанет нажиматься кнопка «Сохранить» (или исчезнет).

Путь решения — я устанавливаю продолжительность сессии 55 минут.

2. Несовместимость с режимом вебвизора от Яндекс метрики

Если включен вебвизор в яндекс метрике, то yootheme pro может начать вести себя очень странно. Иногда выкидывает или делает еще какие-то странные вещи. Может быть это как-то починят, но пока было так.

Пути решения — я добавляют метрику на сайт в виду HTML модуля и публикую его в позиции debug. На время внесения изменений в yootheme pro модуль можно снять с публикации одной кнопкой.

Главное — не забыть потом включить назад 🙂

3. Плагин JL No Doubles ( https://joomline.ru/rasshirenija/plugin/jlnodubles.html ) не совместим с Yootheme Pro

Пути решения — опять же на время редактирования приходится отключать.

Автор вроде обещал что-то поправить, но пока что без движений.

Как оформить текст: 11 главных CSS-свойств

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

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

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

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family :

body

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

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color . Оно принимает значения в различных форматах: можно написать название цвета ( red , blue ), шестнадцатеричное значение ( #ff0000 , #00f ) или функцию rgb() , чтобы задать цвет с помощью трёх чисел.

Размер текста меняется свойством font-size . Оно принимает значения в пикселях ( px ), процентах ( % ) и других единицах измерения.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900 . Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style . По умолчанию у него стоит значение normal , то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

italic — делает текст курсивным;
oblique — делает текст наклонным.

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

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

none — без изменений, значение по умолчанию;
uppercase — все буквы становятся прописными;
lowercase — все буквы становятся строчными;
capitalize — первая буква каждого слова находится в верхнем регистре.

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

overline создаёт линию над текстом,
line-through делает текст зачёркнутым,
underline добавляет подчёркивание.

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

Свойство text-shadow добавляет тексту тень. Оно принимает значение в таком формате:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) /*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

left — влево;
right — вправо;
center — по центру;
justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

У некоторых шрифтов нет жирного и курсивного варианта.
Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
При изменении размера шрифта ( font-size ) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

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

13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

IE 11, 10, 9, 8, 7, …
Chrome 4–35
Edge 12 и 13
Safari 3–9.1
Firefox 2–38
Opera 22 и ниже
Android 4.4.4 KitKat и ниже (а это
Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

23 сентября 2023

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>);

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

28 июля 2023

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

13 июля 2023

Начало работы

CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.

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

Иконки для сайта. Быстро.

Вам не придется тратить время на файлы на вашем сервере. Вы получите все 675 иконки плюс наборы стилей — все оптимизировано для быстрой загрузки.

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

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

Расширенная кастомизация Легко

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

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

Скопируйте полностью папку font-awesome в папку вашего проекта.
Вставьте нижеследующий код в тег в HTML-код вашего вебсайта.

 rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

Скопируйте полностью папку font-awesome в папку вашего проекта.
В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

@fa-font-path: "../font";

Продвинутый уровень Профи

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

gem 'font-awesome-less'

$ bundle

$ gem install font-awesome-less

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less :

@import "font-awesome-sprockets"; @import "font-awesome";

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

gem 'font-awesome-sass'

$ bundle

$ gem install font-awesome-sass

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss :

@import "font-awesome-sprockets"; @import "font-awesome";

Дополнительная информация

Валидаторы

Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.

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

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.

Не могу подключить шрифт в LESS

В общем решил на свой сайт сайт вставить кастомный шрифт, скачал, а вот как подключить? Если пишу при помощи LESS есть ли какой нибудь способ?

Лучший ответ

Обычный CSS, нужен шрифт в форматах woff2, woff.
Ну и стандартно: назвать, определить насыщенность, определить пути.

@font-face font-family: ‘Roboto Condensed’;
src: url(‘../fonts/Robotocondensed.woff2’) format(‘woff2’), url(‘../fonts/Robotocondensed.woff’) format(‘woff’), url(‘../fonts/Robotocondensed.ttf’) format(‘truetype’);
font-weight: 400;
font-style: normal;
>

VotesГуру (2917) 6 лет назад
Не получается
Остальные ответы

less все схавает то что и css // главное правильно прописать путь.
Aljebro правильно написал, но должна быть такая структура: файл стилей должен в папке (например less или css)
лежать, а шрифтs в папке fonts// две точки и слеш перед fonts это выход из папки со стилями. если файл стилей прямо в корне, то эти точки и слеш убрать.