Font Awesome 6

Поговорим про Font Awesome?

Джумла пользует во всем своем многообразии несколько версий этого значкового шрифта (включая: админпанель, шаблон, скрипты сторонних разработчиков). Джумловоды привыкли к «многообразию», «заплаткам и «костылям». Увы, бесплатный cms имеет свои особенности Font Awesome Есть альтернативы? Хорошо.

Не суть. Иконки Font Awesome пользовать приходится, в любом случае, многим вебмастерам. Делюсь практикой.

Новая версия (на день публикации Font Awesome 6) эстетична, практична, изящна (на мой взгляд). Резонный вопрос: Зачем? опустим. Приступим к реализации. Процесс относительно несложен.

Для подключения к сайту Джумла v. 4.x (или иной дргой cms) Font Awesome 6 производим следующие телодвижения.

  • Скачать Font Awesome 6 (архив *.zip). В архиве две папки. Их необходимо залить на сервер вашего сайта в одну директорию. У меня эта директория «в корне» сайта именуется: /js/.
    (ссылка бесплатная, не дергайтесь Font Awesome, на этом сайте нет ничего платного, совсем. Только даром.).
  • В head сайта прописываем строку:
    <link type="text/css" rel="stylesheet" href="/js/fontawesome/all.min.css" />

    Естественно, если вы пользуете папку: /js/. Залить можно куда угодно, только не забывая про url адресации. Пропишите нужный, свой.
  • В css шаблона надо прописать, примерно так:
    span[class*="fa-"], i[class*="fa-"], .fal, .fal:before, .far, .far:before, .fa, .fa:before {font-family:'Font Awesome 6 Pro'; font-weight:300; font-style:normal; font-variant:normal; line-height:1;}
    Не стал разбираться в изящности стиля. Все равно, по месту, будут правки. Изменяя font-weight можно получить нужный результат, 300: очень тонко. Но иногда: так и надо Font Awesome
  • Всё. Пользуйтесь красотами Font Awesome 6

Придется прописывать отступы, размеры и иные атрибуты в css. Но оно того стоит. Как всегда.

Значки классов тупо копируем из Путеводителя Font Awesome. Типо:

текст ахинеи <i class="fa-light fa-star-sharp"></i>

Отобразится: текст ахинеи

Ну и всё? Что еще сказать. Элементарно, но не всегда очевидно «в запаре» работ.

Стоит подумать об отключении иных версий Font Awesome, если они задействованы на проекте. В меню, модулях, пр. Лишняя загрузка: снижение скорости. На некоторых проектах проставлены аж 3-и версии (было). Всякое случается.

В существующих css стоит заменить существующие стили Font Awesome на обновленные:

font-family:'Font Awesome 6 Pro'; font-weight:300;

В принципе, совсем это и не пустяки, если внимательно просмотреть параметры тормозов от скоростного замерителя google. Первый тормоз: шрифт.

Еще: внешние подключения к импортным серверам ныне... неизвестно, как сложится. Увы, имеет значение. Сам не рад, а куда деваться.

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

ps: да извинят меня знатоки за банальщину Font Awesome. Не всегда очевидное — очевидно. Если есть неточности (могут быть), уточняйте.

Добавить комментарий


Планируете проект?

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение.

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Не корректный номер.
Опишите кратко суть задачи: *
Необходимо подтвердить согласие с Политикой.

Планируете создание веб проекта?

Заполните форму и наш специалист свяжется с вами для консультации и составит для вас персональное предложение.

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

Разработка сайтов «под ключ» любой сложности и назначения!

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных.

©2010–2022 веб-лаборатория «Reklama-No» | Создание, поддержка и продвижение сайтов