30 сентября 2020 в 21:53
Приветствую. Специалисты по высокоуровнему фронтэенду есть на форуме?
На одном не моем сайте есть графический элемент, который выводится шрифтом.
.element::after {
content: "\f107";
font-family: FontAwesome;
}
content: "\f107";
font-family: FontAwesome;
}
Как скопировать этот элемент себе?
Комментарии
подключи FontAwesome у себя и выведи
Я ж так понимаю FontAwesome - это набор значков, из которых вебмастер создал шрифт, и этим шрифтом на его сайте выводятся значки. Значит надо как-то его шрифт заполучить. Или нет?
https://fontawesome.com/
То, что ты понимаешь, это icomoon.io Классная штука, постоянно пользуюсь.
Понятно. Всем спасибо, кажется заработало. Буду разбираться.
Наверное я немного поспешил, объявлять тему решенной. Поспешил, потому как в Линуксе и Файрфоксе все работало, а в других осях и бразурах - не все. Итак поставил модуль https://www.drupal.org/project/fontawesome.
1.
<i class="fa fa-phone"></i>- заработало - вывелся значек телефона.2.
<i class="fa fa-facebook"></i>- работает, только если Font Awesome Method: SVG with JS. При этом HTML комментриуется и заменяется SVG-шкой. Странно: на сайте-доноре такого не наблюдаю. Можно как-то исправить?3.
font-family: 'FontAwesome';
content: "\f107";
}
Эта конструкция не зработала нигде. Как заставить ее работать?
Просто почитайте документацию по fontawesome (не модулю).
Такие библиотеки лучше вообще без модуля подключать.
+1.
Действительно, зачем нужен отдельный модуль.
Как минимум модуль fontawesome добавляет ещё текстовый фильтр для CKEditor, чтобы тот не резал символы.
Читать документацию хорошо тогда, когда знаешь о чем она написана.
Продвигаемся вперед. Отключил модуль. Зарегистрировался на сайте fontawesome.com получил код типа
<script src="https://kit.fontawesome.com/abrakadabra.js" crossorigin="anonymous"></script>, скопировал его себе в файл_шаблона_tpl.php - вроде все везде стало работать.Почему один и тот же код
<i class="fa fa-map-marker"></i>на сайте доноре выдает значек f041, а на моем f3c5 ?Напомнило:
А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все, мало кто может это делать
Документация написана очевидно же о чём ))) о fontawesome
У fontawesome есть куча версий. В каждую версию добавляют новые иконки, поэтому коды иконок могут меняться. Вот ты упоминаешь, что коды разные, а картинку они одну и ту же выводят или разные?
Разные коды выводят похожие картинки, но не не одинаковые. А как сделать чтобы выводились одинаковые?
Как сказал бы кэп: использовать одинаковые коды. Но боюсь, что я не понял вопроса.
Нужно отметить, что некоторые начертания символов Fontawesome доступны только в Pro-версии шрифта. И она платная.
PS.
Правильнее drupal_add_js() или #attached. Ну, вы поняли
Нужно использовать ту же самую версию шрифта. А ещё можно тут выбрать из разных шрифтов интересующие иконки, загрузить свои иконки, и выставить какие угодно коды для них
У меня, кстати, подозрение, что VasyOK подключил свой кастомный набор символов Fontawesome. Судя по адресу https://kit.fontawesome.com/abrakadabra.js.
HTML код
У меня отсюда https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css выдает:
content: "\f3c5";
}
На сайте доноре этот же HTML код там со своего CSS файла подгружается
content: "\f041";
}
Почему так происходит?
А как узнать, какая версия шрифта на доноре?
Все, что делал - обо всем написал в теме.
Там конечно, не "абракадабра", а буквенный код. Наверное, к моему аку привязан.
<i class="fas fa-map-marker"></i>если я этот код использую - у меня так же, как на доноре. Но это уже (как понял) более поздняя версия fontawesome.Устаревшая версия шрифта. В 5-й версии была частично изменена таблица символов Fontawesome - некоторые старые переехали на другие позиции.
Я не совсем про это. А про субдомен kits.
Точно уже не помню, но по-моему для кастомного и стандартного сета этот субдомен отличается.
Попробовать открыть и посмотреть CSS и JS файлы с донора. В начале файла часто бывает заголовок-комментарий с номером версии.
Просто открой свою ссылку на стиль и увидишь там вот это:
https://prnt.sc/uuuc1m
Советую отойти от шрифтов иконочных. С ними легко работотать, но на мобилах это пипец. Смотрите в сторону SVG.
А в чём проблема с иконочным шрифтом на мобиле?
Они при увеличении неадекватно себя ведут. Проверенно.
Но ведь это по сути те же свг-шки
Нет. При всем уважении. Фонтавезоме - это шрифт. И он боится масштабирования. Свг в свою очередь - это растр. И его можно увеличивать до бесконечности.
И да. Некоторые браузеры вообще иконочные шрифты коряво отображают.
Опечатались. Svg - это вектор, а не растр
Да, заработался. Конечно вектор.
Хз, я почти никогда не использую font awesome, потому что он очень много весит, а нужно из него от силы 10% иконок. Поэтому я из свг-шек компилирую через icomoon свой шрифт и с ним никогда нет никаких проблем. Иконочный шрифт - это в первую очередь шрифт, а нормальные шрифты не боятся масштабирования.
А я просто инлайново SVG в css использую
Да вроде большинство форматов шрифтов вообще-то тоже векторные. И масштабируются без проблем. Растровые шрифты - это как правило display-only (экранные) шрифты и часто служат только для экранного представления своей векторной версии.
Да если бы. Вот фонтавезоме при большом увеличении. Это примерно на ретине будет так выглядеть.
А еще какой нибудь сафари может показать просто прямоугольник с крестиком, вместо телефончика. Щас лень искать примеры.
Заходим сюда: https://fontawesome.com/icons?d=gallery
1. Увеличиваем масштаб.
2. Заходим в девтулзы, увеличиваем любой иконке шрифт, например до 1000рх.
3. Перестаём писать чушь.
Да, действительно. Признаю свой косяк. Иконочные шрифты - это тоже вектор, и масштабирования они не боятся.
Ушел от их использования достаточно давно, помню, что причины были. Вот и напутал. А перестал их использовать примерно по следующим причинам:
1. Ограниченность выбора.
2. Отсутсвие индивидуальности.
3. По крайней мере на тот момент были действительно проблемы отображения в некоторых браузерах. Начиная с того, что иногда иконки просто не отображались. Иногда бывали рваные края. Иногда по высоте пиксели гуляют. Короче, это контроллировать очень сложно.
С SVG проблем никаких. Хоть любую простенькую иконку можно через css подключить, хоть логотип. Цвета любого элемента тоже меняются через стили. Очень удобно. Если кто то стоит перед выбором - попробуйте, не пожалеете.
Третий раз пишу: есть сайт icomoon.io
Там прямо на сайт можно загрузить кучу свг-шек и сделать свой шрифт и будет индивидуальность)) плюс там же можно добавить в шрифт иконки из других шрифтов.
А свг не всегда так практичен, как иконки. Например, если иконка используется, как строчный элемент, то при использовании шрифта её просто вставил в текст и всё. А свгшку, вставленную в бэкграунд ещё придётся выравнивать по вертикали и подгонять размер.
Порой и со шрифтовыми иконками приходится возиться, выравнивая относительно базовой линии - особенно в случае верхнего регистра всей строки. Ну это так, к слову.
На мой взгляд, у SVG одно ощутимое преимущество - можно применять очень прикольные и необычные CSS-анимации непосредственно к контурам иконки.
У свг есть много преимуществ и перед шрифтами, и перед растровой графикой. Это если говорить о возможности всячески модифицировать картинки через css и прочее. Но иконочный шрифт нужен там, где он нужен. Никто не ставит шрифт ради одной иконки. А вот когда 20-50 иконок прилетают всего за один запрос, который к тому же сразу кэшируется, это уже плюс к производительности. Кроме того, тот факт, что иконки завязаны на css-классы, позволяет легко управлять тем, какую иконку рендерить в тех или иных условиях.
Ага, я тоже. Самый смак. Можно прицепить к любому коду в любой CMS.