Итак, я пытаюсь прототипировать маркетинговую страницу, и я использую Bootstrap и новый файл Font Awesome. Проблема в том, что когда я пытаюсь использовать значок, все, что отображается на странице, является большой площадью.
Вот как я включаю файлы в голову:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-responsive.css">
<link rel="stylesheet" href="/font-awesome.css">
<link rel="stylesheet" href="/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="/font-awesome-ie7.min.css">
<![endif]-->
</head>
И вот пример того, как я пытаюсь использовать значок:
<i class="icon-camera-retro"></i>
Но все это получается на большом квадрате. Кто-нибудь знает, что может происходить?
В соответствии с документацией (шаг 3) вам необходимо изменить прилагаемый файл CSS, чтобы указать на расположение шрифта на вашем сайте.
У вас должно быть 2 класса, класс fa
и класс, который идентифицирует нужный значок fa-twitter
, fa-search
и т.д. & hellip;
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
Используйте этот
<link href="/font-awesome.min.css" rel="stylesheet">
У меня была аналогичная проблема с Amazon Cloudfront CDN, но она была решена после того, как я начал загружать ее из maxcdn
Это может помочь, проверить, чтобы вы случайно не изменили семейство шрифтов на значке. Если вы изменили семейство шрифтов .fa, то из: FontAwesome значок не будет отображаться. Это всегда что-то глупое и маленькое.
Надеюсь, что это поможет кому-то.
Если вы используете LESS или SASS, откройте файл font-awesome.less/sass и отредактируйте переменную пути @fa-font-path: "../font";
, которая указывает на фактические шрифты:
@fa-font-path: "../font";
@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
То же самое с CSS, за исключением того, что вы редактируете путь в блоке объявления @font-face:
@font-face {
font-family: 'FontAwesome';
src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
@fa-font-path: "../fonts";
работал на меня. (Обратите внимание на добавленные недостающие s
)
Откройте шрифт-awesome.css theres code like:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
у вас должна быть папка типа:
font awesome -> css
-> fonts
или самый простой способ:
<link rel="stylesheet" href="/font-awesome.min.css">
Я попытался решить ту же проблему с несколькими предыдущими решениями, но они не работали в моей ситуации. Наконец, я добавил эти 2 строки в HEAD, и это сработало:
<link rel="stylesheet" href="/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome//font-awesome.css">
Я использую Font Awesome 4.3.0
только ссылку из maxcdn works, как упоминалось здесь,
но для размещения на вашем сервере установка шрифтов и css в одной папке для меня, например
то просто свяжите css:
<link href="/font-awesome.min.css" rel="stylesheet" />
Надежда помогает кому-то.
У меня была эта проблема. Проблема заключалась в том, что у меня был стиль CSS-шрифта для семейства шрифтов с важным изменением шрифта font-size.
В случае, если вы работаете с Maven и Apache Wicket, также проверьте следующее, чтобы попытаться решить проблему с помощью Font-Awesome и иконки, которые не загружаются:
Если вы разместили свои файлы, например, в следующей структуре файла
/src
/main
/java
/your
/package
/css
font-awesome.css
/font
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.svgz
fontawesome-webfont.ttf
fontawesome-webfont.woff
Проверить 1) Правильно ли вы используете Guard Resource Resource, чтобы разрешить загрузку файлов шрифтов правильно?
Пример из вашего класса, который расширяет WebApplication:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
Проверить 2). После того, как вы убедитесь, что все шрифты правильно перенесены в веб-браузер, проверьте, что было фактически перенесено в веб-браузер, т.е. целостность файлов шрифтов изменение? Сравните файлы в исходном каталоге и файлах, переданных в веб-браузер, используя, например, панель инструментов веб-разработчиков Firefox и DiffDog (для сравнения файлов).
В частности, если вы используете Maven, помните о фильтрации ресурсов. Не фильтруйте папку, в которой содержатся ваши файлы шрифтов, иначе они будут повреждены.
Пример из вашего pom.xml
<build>
<finalName>Your project</finalName>
<resources>
<resource>
<filtering>true</filtering>
<directory>src/main/resources</directory>
</resource>
<resource>
<filtering>false</filtering>
<directory>src/main/java</directory>
<includes>
<include>**</include>
</includes>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
</build>
В приведенном выше примере мы не фильтруем папку src/main/java, где содержатся файлы css и шрифтов.
Дополнительную информацию о фильтрации двоичных данных см. в документации:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
В частности, документация предупреждает: "Предупреждение: не фильтруйте файлы с помощью бинарный контент, как изображения! Это, скорее всего, приведет к повреждению. Если у вас есть как текстовые файлы, так и двоичные файлы в качестве ресурсов, вам необходимо объявить два взаимоисключающих набора ресурсов. Первый набор ресурсов определяет файлы для фильтрации, а другой набор ресурсов определяет файлы для копирования без изменений... "
Это должно быть намного проще в новой версии 3.0. Проще всего указывать на CDN Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
Вы должны вернуть заголовок Access-Control-Allow-Origin в * для ваших файлов шрифтов
Если ваш сервер является IIS, обязательно добавьте правильный MIME для обслуживания расширения .woff.
Правильный MIME равен application/octet-stream
Используйте этот <i class="fa fa-camera-retro" ></i>
, вы не определили классы fa
если вы используете sass и импортировали в свой main.scss
@import '../vendor/font-awesome/scss/font-awesome.scss';
Ошибка может возникнуть из файла font-awesome.scss, который ищет файлы шрифтов в этом относительном пути.
Значит помнить, чтобы переопределить переменную $fa-font-path:
$fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;
так что нет необходимости добавлять cdn в ваш index.html
Я использую Официальный шрифт Awesome SASS Ruby Gem и исправил ошибку, добавив нижнюю строку к моему application.css.scss
@import "font-awesome-sprockets";
Пояснение:
Файл font-awesome-sprockets включает вспомогательные вспомогательные функции Sass, которые используются для поиска правильного пути к файлу шрифта.
Я изменил с 3.2.1 до 4.0.1, и папка была шрифтом и теперь называется шрифтами.
src: url ('../font/fontawesome-webfont.eot? v = 3.2.1');
src: url ('../fonts/fontawesome-webfont.eot? v = 4.0.1');
Я надеюсь, что это поможет кому-то.
Какая исправленная проблема для меня (на моей машине с Windows 7) расшифровывала мою директорию проекта. Это безумие, сколько изначально возникает из-за визуальных и функциональных сбоев при тестировании вашего сайта. Просто войдите в командную строку и запустите:
attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
... где% PROJECT_PATH% - это полный путь к каталогу, в котором хранится ваш код.
Моя проблема заключалась в том, что файлы шрифтов были размером 0kb, я не знаю, как это произошло, возможно, git issue
У меня был поврежденный файл шрифта, хотя он, похоже, был загружен и отображен правильно в источнике Chrome devtools Source, он не отображался правильно. Я снова загрузил его и разрешил.
Возможно, что ваш путь к шрифту неверен, поэтому css не может загрузить шрифт и отобразить значки, чтобы вам нужно было задать многострочный путь прикрепленных шрифтов.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
Моя проблема заключалась в добавлении
<link rel="stylesheet" href="/font-awesome.min.css">
внутри
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
тег
Я исправил его, поставив его вне тега.
Это не работало для меня, потому что у меня была директива Allow from none
для корневого каталога в моей конфигурации apache. Вот как я получил его на работу...
Моя структура каталогов:
root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html
где мой index.html имеет:
<link rel="stylesheet" href="/font-awesome.min.css">
Я решил продолжать запрещать доступ к моему корню и вместо этого добавил другую запись в мою конфигурацию apache для root/font-awesome/
<Directory "/path/root/font-awesome/">
Allow from all
</Directory>
При работе на локальном сервере и загрузке css убедитесь, что вы также загрузите файл шрифта.
Чтобы проверить, все ли в порядке (в firefox), щелкните правой кнопкой мыши на странице, проверьте элемент, консоль, CSS и проверьте что-нибудь вроде
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): status=2147746065 source: http://localhost/156/admin/css/fonts/fontawesome-webfont.ttf?v=4.3.0
Я получал эту коробку в своем коде, пока не добавил эту ссылку между тегами на моем html. Надеюсь это поможет!
link href= "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel= "stylesheet"
Использование абсолютного вместо относительных путей разрешило это для меня. Я использовал относительные пути (см. Первый пример ниже), и это не сработало. Я проверил через консоль и обнаружил, что сервер возвращает 404, файлы не найдены.
Относительный путь вызвал 404:
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}
Абсолютный путь разрешил перекрестный браузер:
@font-face {
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}
Я бы не рекомендовал делать это, если вам не нужно, но это работает для меня. Конечно, вы должны повторить это для всех форматов шрифтов в файле font-awesome.css.
Я нашел решение сегодня, которое было:
Проблема с их документацией заключается в том, что они не указывают ссылку на то, где вы должны получить копию всего проекта-шрифта, который будет помещен в ваш проект.
.css
.