Font awesome telegram не работает
Я хотел бы знать, как сделать так, чтобы вместо квадратного поля с рамкой отображался значок.
пожалуйста, обновите вопрос, указав структуру папок, в которой есть папка font-awesome, чтобы мы могли определить, правильно ли получает "font-awesome.min.css" путь ttf или нет. Только css не будет работать.В моем случае я сделал следующую ошибку в своем коде css.
Это переопределит все правила семейства шрифтов для всей страницы. Моим решением было переместить код в тело вот так.
NB: всякий раз, когда вы используете !important флаг в css, любое другое правило css, объявленное того же типа для того же элемента, будет отменено.
Это было для меня решением. У меня было, * и я поменял его на *.not(i) У меня тоже была эта проблема, но я не осознавал этого целую вечность, потому что в DevTools действительно было похоже, что используется FontAwesome. Подробнее см. Мой ответ.Когда вы откроете, font-awesome.min.css вы увидите следующий путь:
Это означает, что вам нужно создать каталог, Fonts а затем скопировать файлы fontawesome-webfont.ttf ( fontawesome-webfont.woff , fontawesome-webfont.eot ) в эту папку. После этого все должно работать нормально.
Поскольку по крайней мере 0.8.1 font-awesome не упоминается. Есть три summernote файла в папке шрифтов с расширениями eot , ttf и woff которые должны быть распределены. Будьте осторожны, в 4.6.3 (если не раньше) это fonts не так, Fonts и в системе, чувствительной к регистру, возникают проблемы . почему на сайте font awesome не написано? это действительно не ясно. Потрясающие! Я думал, что шрифты должны быть в той же папке, что и css, они должны быть на один уровень выше. Также убедитесь, что ваша библиотека обновлена. У меня были все мои логотипы, кроме логотипа bandcamp. Как только я загрузил обновленную версию 4.7 и заменил файлы, все заработало.Имейте в виду, что в новой версии (5) font awesome используется префикс "fas" или "fab" вместо "fa" .
Цитата с их веб-сайта:
Префикс fa устарел в версии 5. Новое значение по умолчанию - это стиль fas solid и стиль fab для брендов.
Вот почему мои шрифты отображали пустые квадраты. Теперь исправлено.
Это сделало это для меня! Странно, что он не обновлялся в документации Это было единственное, что сработало. Если вы используете современную версию, используйте это. Спасибо, для меня некоторые значки wirk с fas, а другие с fab, например fab fa-twitter подойдут, но fas fa-twitter показывает белый квадрат, поймите! Так что, если новая версия fas, то зачем мне менять классы сВо-первых, убедитесь, что у вас есть , а также класс значка. Так что не только
Тогда все работает как положено. Это решило мою проблему.
Это сработало для меня. Для меня fab fa-envelop не работал, но тогда работал fa fa-envelop. Очень странно, но моя проблема решена. @JordanSchuetz «fab» относится к значкам брендов, например «fab fa-facebook-f». В более новых версиях вы найдете «fas» для «твердого» варианта, так что ваш будет фиксироваться на «fas fa-envelope» в новых версиях или «fa fa-envelope» в более старых.Откройте код font-awesome.css, например:
у вас должна быть такая папка:
или самый простой способ:
Убедитесь, что путь к вашему CSS файлу правильный. Скорее предпочитают абсолютные ссылки, их легче понять, поскольку мы знаем, откуда мы начинаем, и поисковые системы также предпочтут их относительным ссылкам. А чтобы уменьшить пропускную способность, используйте ссылку с серверов font-awesome:
Более того, если вы его используете, вам не нужно будет загружать дополнительные шрифты на свой сервер, и вы будете уверены, что указали правильный CSS файл, и вы также мгновенно получите выгоду от последних обновлений.
Я сделал то же самое, и у меня остался только квадратный ящикя имел дело с той же проблемой, тогда я понял, что мне нужно использовать новую версию (5 и выше)
используйте этот cdn, он будет работать.
Для начала вам не следует иметь и то и другое. font-awesome.css font-awesome.min.css
Как правило, используйте font-awesome.css во время разработки, а затем переключайтесь на, font-awesome.min.css когда сайт вас устраивает.
Подобные проблемы часто вызваны относительными путями и местоположениями, поэтому проверьте, где ваш html-файл находится по отношению к CSS.
Если ваш html-файл находится в базовом каталоге, а CSS - в подпапке вне корня, вам потребуется: href="./css/font-awesome.css" (одна точка)
Все вышеперечисленное верно, однако моя проблема заключалась в том, что я загрузил бесплатную версию FA5, в которой нет:
У меня также были проблемы с работой FontAwesome версии 5+. Изменили свою папку «веб-шрифты» на «шрифты» в CSS и разместили ее таким же образом, и она не работала должным образом. Заменил файлы на v4.7.0 и работает как шарм. Грм. В версии 5 семейство шрифтов для иконок больше не «FontAwesome». В бесплатной версии это теперь «Font Awesome 5 Free» и «Font Awesome 5 Pro» в профессиональной версии. У меня возникла эта проблема, когда я вручную использовал коды символов в нескольких местах, и они перестали работать из-за того, что семейство шрифтов не было установлено.Я столкнулся с той же проблемой . поэтому вместо того, чтобы скачивать отличный шрифт, я добавил ссылку в свой html-код, и это сработало.
Я успешно установил Font Awesome, используя их CDN и javascript include (как описано на этой странице ). Затем я попытался скопировать HTML и CSS на некоторые устаревшие страницы и внезапно увидел пустые квадратные поля вместо значков.
Я видел ответ Дэниела (см. Выше), и, поскольку мой старый файл CSS был огромным (и многолетним), я подозревал, что это проблема. Однако когда я заглянул в Chrome DevTools, действительно было похоже, что Font Awesome загружен:
Я ожидал увидеть шрифт зачеркнутым, если возникнет проблема . Однако я действительно исчерпал все свои возможности, поэтому я проверил вычисленные стили и ясно увидел, что шрифт Font Awesome определенно не используется. (См. Шрифт Rendered внизу)
Мой старый файл CSS был беспорядочным, и я предпочел не трогать его, поэтому я обманул, сделав это - пожалуйста, никому не говорите :)
Также следует отметить, что когда я обновился с Font Awesome версии 4.7.0 до версии 5.4.1, эта проблема исчезла! Я использовал это руководство по установке и этот HTML
поэтому я пытаюсь создать прототип маркетинговой страницы, и я использую Bootstrap и новый удивительный файл шрифта. Проблема в том, что когда я пытаюсь использовать значок, все, что отображается на странице, - это большой квадрат.
вот как я включаю файлы в голове:
и вот пример того, как я пытаюсь использовать значок:
но все это отображается в большом квадрате. Кто-нибудь знает, что происходит?
по словам документация (Шаг 3), вам нужно изменить предоставленный файл CSS, чтобы указать местоположение шрифта на вашем сайте.
у вас должно быть 2 класса, fa class и класс, который идентифицирует нужный значок fa-twitter , fa-search , etc.
У меня была аналогичная проблема с Amazon Cloudfront CDN, но она была решена после того, как я начал загружать ее из maxcdn
Это может помочь, убедитесь, что вы случайно не изменили семейство шрифтов на значок. Если вы изменили .семейство шрифтов элемента fa от: FontAwesome значок не будет отображаться. Это всегда что-то глупое и маленькое.
надеюсь, что это кому-то поможет.
Если вы используете меньше или SASS, откройте шрифт-awesome.less / SASS file и отредактируйте переменную пути @fa-font-path: "../font"; что указывает на фактическое шрифтов:
то же самое с CSS, за исключением редактирования пути в блоке объявления @font-face:
откройте шрифт-удивительный.стиль CSS есть код :
вы должны иметь папку как :
или самый простой способ :
Я попытался решить ту же проблему с несколькими предыдущими решениями, но они не работали в моей ситуации. Наконец, я добавил Эти 2 строки в голову, и это сработало:
Я использую Font Awesome 4.3.0 просто ссылка из maxcdn в строительство как уже упоминалось здесь,
но для размещения на сервере размещение шрифтов и css в одной папке работало для меня, как это
тогда просто свяжите css:
надеюсь кому-нибудь поможет.
В случае, если вы работаете с Maven и Apache Калитка также проверьте следующее, чтобы попытаться решить проблему с Font-Awesome и значками, которые не загружаются:
Если вы разместили свои файлы, например, в следующей файловой структуре
проверить 1) правильно ли вы используете пакет Resource Guard, чтобы правильно загружать файлы шрифтов?
пример из вашего класса, который распространяется приложения:
в частности, если вы используете Maven должен знать о фильтрации ресурсов. Не фильтруйте папку, в которой содержатся файлы /font, иначе они будут повреждены.
пример из вашего pom.в XML
В приведенном выше примере мы не фильтруем папку src/main/java, в которой содержатся файлы css и шрифтов.
для получения дополнительной информации о фильтрации двоичных данных см. Также документация:
в частности, документация предупреждает: "предупреждение: не фильтровать файлы с двоичный контент, как изображения! Это, скорее всего, приведет к повреждению выходных данных. Если у вас есть как текстовые файлы, так и двоичные файлы в качестве ресурсов, вам необходимо объявить два взаимоисключающих набора ресурсов. Первый набор ресурсов определяет файлы для фильтрации и другие набор ресурсов определяет файлы для копирования без изменений. "
У меня была эта проблема. Проблема была в том, что у меня был стиль CSS семейства шрифтов !важно переопределение шрифта fontawesome.
Если ваш сервер IIS, обязательно добавьте правильный MIME для обслуживания .WOFF файл расширением. Правильный МИМ application/octet-stream
вы должны вернуть заголовок Access-Control-Allow-Origin to * для файлов шрифтов
возможно, что ваш путь шрифта неверен, поэтому css не может загрузить шрифт и отобразить значки, поэтому вам нужно предоставить многожильный путь прикрепленных шрифтов.
Главное меню » Информация » Шрифт Awesome 5 не отображает иконки
(2 оценок, среднее: 3,00 из 5)
1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа
Бесплатно
ВЕБ-ШРИФТЫ И CSS
SVG & JS
Профессионал
Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.
ВЕБ-ШРИФТЫ И CSS
SVG & JS
Последние выпуски отображаются во время публикации.
2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.
Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:
| Стиль иконки | Доступность |
|---|---|
| solid | Свободно |
| regular | Только pro |
| Light | Только pro |
| Brands | Свободно |
Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.
3. Убедитесь, что ваш формат Unicode правильный
4. Убедитесь, что у вас есть правильное семейство Font Awesome Font в вашем CSS
Если у вас есть правильный файл/привилегии (как указано выше), убедитесь, что ваш элемент покрыт правильным семейством шрифтов Awesome Font.
Бесплатно
Профессионал
Выше приведены общие семейства шрифтов для Font Awesome 5, но вы также можете вызывать определенные стили Font Awesome 5 (Solid, Regular, Light, Brands):
Бесплатно
Профессионал
Обратите внимание, что, как указано выше, стиль «Brands», похоже, не соответствует соглашению об именовании Font Awesome, и в обеих версиях Basic и Pro эти значки имеют семейство шрифтов «Font Awesome 5 Brands». Например, если вы хотите показать иконку Font Awesome на Facebook, вам следует применить стиль «Font Awesome 5 Brands»:
5. Добавьте больший вес шрифта
Интересно, что многие браузеры будут отображать пустое поле, если вы не используете Font Weight более 600, поэтому добавьте следующее в свой CSS
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Иконочный шрифт Awesome - это простой шрифт, содержащий в себе в место букв символы и специальные знаки, которые легко оформлять через CSS по такой же аналогии как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить для них цвет, поменять размер, задать тень и многое другое.
В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.
1. Как подключить шрифт Awesome
Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега <link> . Далее более подробно разберем каждый из этих способов.
Способ 1
Используем сторонние сервисы CDNJS или BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:
Для подключения с CDNJS:
Для подключения с BootstrapCDN:
Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css . После того как файл подключили, можно приступать использовать иконки на своем ресурсе.
Способ 2
Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts . Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link> , только теперь из папки css нашего сайта.
Используем полную версию:
Используем минимизированную версию:
2. Как работать с иконками Font Awesome
На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span> , но предварительно нужно прописать класс fa каждому из элементов.
Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after , а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.
2.1. Как увеличить иконку
Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x , fa-3x , fa-4x или fa-5x .
| fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
2.2. Как фиксировать ширину иконки
Для фиксирования ширины иконки используется класс fa-fw , задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.
2.3. Как маркировать списки LI иконками
Для замены стандартных маркеров в блоке <ul>. </ul> используются классы fa-ul и fa-li .
- элемент списка
- элемент списка
- элемент списка
- элемент списка
2.4. Кавычки для цитат обрамленные в рамке
Что бы установить рамку для иконки используем класс fa-border , а при помощи pull-right и pull-left можем добавят кавычки для текста.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
2.5. Анимированные иконки
Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse . Так же можно использовать классы fa-spinner , fa-refresh , и fa-cog .
| fa-spin fa-cog | fa-spin fa-spinner | fa-spin fa-refresh | fa-spin fa-circle-o-notch | fa-pulse fa-spinner |
2.6. Поворачивание и отзеркаливание иконок
Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical .
| normal | fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical |
2.7. Группирование иконок
Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack . Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg , fa-2x , fa-3x , fa-4x , или fa-5x .
| fa-twitter на fa-square-o | fa-flag на fa-circle | fa-terminal на fa-square | fa-ban на fa-camera |
2.8. Примеры использование иконок в Bootstrap 3
Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.
3. Группы иконок
В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.
Читайте также: