На сайте вместо иконок квадратики как можно исправить

In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded:

If you have placed your files for example in the following file structure

/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

Check 1) Are you correctly using a Package Resource Guard in order to allow to load the font files correctly?

Example from your class which extends WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Check 2) After you have made sure that all fonts are correctly transferred to the Web Browser, check for what has been actually transferred to the Web Browser, i.e., did the integrity of the font files change? Compare the files in your source directory and the files transferred to the Web Browser using, e.g., the Web Developer Toolbar of Firefox and DiffDog (for file comparison).

In particular if you are using Maven be aware of resource filtering. Do not filter the folder where your /font files are contained — otherwise they will be corrupted.

Example from your 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>

In the example above we do not filter the folder src/main/java, where the css and font files are contained.

For further information on the filtering of binary data please also see the documentation:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

In particular the documentation warns: «Warning: Do not filter files with
binary content like images! This will most likely result in corrupt output.
If you have both text files and binary files as resources, you need to
declare two mutually exclusive resource sets. The first resource set
defines the files to be filtered and the other resource set defines the
files to copy unaltered…»

In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded:

If you have placed your files for example in the following file structure

/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

Check 1) Are you correctly using a Package Resource Guard in order to allow to load the font files correctly?

Example from your class which extends WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Check 2) After you have made sure that all fonts are correctly transferred to the Web Browser, check for what has been actually transferred to the Web Browser, i.e., did the integrity of the font files change? Compare the files in your source directory and the files transferred to the Web Browser using, e.g., the Web Developer Toolbar of Firefox and DiffDog (for file comparison).

In particular if you are using Maven be aware of resource filtering. Do not filter the folder where your /font files are contained — otherwise they will be corrupted.

Example from your 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>

In the example above we do not filter the folder src/main/java, where the css and font files are contained.

For further information on the filtering of binary data please also see the documentation:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

In particular the documentation warns: «Warning: Do not filter files with
binary content like images! This will most likely result in corrupt output.
If you have both text files and binary files as resources, you need to
declare two mutually exclusive resource sets. The first resource set
defines the files to be filtered and the other resource set defines the
files to copy unaltered…»

Главное меню » Информация » Шрифт Awesome 5 не отображает иконки

1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа

Бесплатно

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Профессионал

Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Последние выпуски отображаются во время публикации.

2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.

Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:

Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.

3. Убедитесь, что ваш формат Unicode правильный

обратите внимание, это не то что ‘/f077′

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.

Столкнулся с такой проблемой: на сайт подключил иконки Font-Awesome, но вместо самих иконок отображаются квадраты вот такого рода:

Файл css подключен и в нем все шрифты подключены корректно (все пути верно указаны), в чем может быть проблема и как её исправить? Заранее благодарю!

2 ответа 2

Нужно правильно прописывать классы Font Awesome

для v5

для v4

Проблема в том, что ваш css файл не может найти файлы иконок fontawesome. Скорее всего у вас неправильно указан путь в вашем css файле. То что показываются квадратики , указывает на то что ваш css файл успешно подключен, осталось только выбрать правильно путь до иконок.

Можете изобразить дерево вашего сайта(расположение файлов)?

Сентябрь 26, 2016

Значки Font Awesome не отображаются локально, если они не размещены на CDN .

Вы не используете плагины/расширения, которые подгружают более старую/модифицированную версию Font Awesome;

Ваша панель разработчика браузера указывает, что Вы загружаете правильные файлы шрифтов;

Расширения вашего браузера не блокируют веб-шрифты (noscript, adblockplus и т.д.);

Ваша операционная система не блокирует веб-шрифты (Групповая политика Microsoft).

Если значки Font Awesome отображаются как квадратики, просто добавьте следующий фрагмент кода в ваш файл стилей:

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

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

Если значки Font Awesome не отображаются только в Firefox/IE, добавьте следующий фрагмент кода в файл . htaccess :

Обратите внимание на нашу коллекцию высококачественных Веб-шаблонов, если Вам нужно больше шаблонов!

Вы можете также ознакомиться с детальным видео-туториалом ниже: