fa иконки не отображаются

Question

<link rel="stylesheet" href="fontawesome/css/all.css" />
<link href="fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="fontawesome/css/brands.css" rel="stylesheet" />
<link href="fontawesome/css/solid.css" rel="stylesheet" />
<link href="fontawesome/css/sharp-thin.css" rel="stylesheet" />
<link href="fontawesome/css/duotone-thin.css" rel="stylesheet" />
<link href="fontawesome/css/sharp-duotone-thin.css" rel="stylesheet" />

прописал данный код как указан на сайте этих иконок, где fontawesome папка куда все тысячи файлов загружены этих иконок, который выдает сам сайт для скачивания.

<i class="fas fa-vk" aria-hidden="true"></i>

прописал сам путь к иконке - но не работает

<i class="fa fa-vk" aria-hidden="true"></i>

прописал так как указано также на сайте и тоже не работает. Наблюдаю одни жирные квадраты.

Смотрел в интернете и пишут, что они не бесплатные, а по 49 долларов. Но на сайте указано же бесплатно. Как это понимать?

Раньше все было проще - поставил ссылку на файл css и все работает и при чем ссылка была на их сайт, и не нужно было скачивать по 5000 файлов в архиве и закачивать на сайт.

ОС на самом сайте не нашел.

Answer 1

1. Проверка структуры проекта

Чтобы иконка отобразилась, необходимо ее взять из ресурса

Вы используете путь локальный, поэтому убедитесь, что у вас есть нужный файл


project-folder/
├── index.html
└── fontawesome/
    ├── css/
    │   ├── fontawesome.css
    │   └── brands.css
    └── webfonts/
        ├── fa-brands-400.woff2
        └── fa-brands-400.woff

файлы 400.woff/400.woff2 это шрифты для иконок

Без этих файлов иконки не будут отображаться — вместо них будут квадраты или пустые блоки

2. Альтернативное подключение стилей

***либо проще, используйте CDN, и таким образом можно одной строкой загрузить все стили

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

/*можно добавить цвета*/
.icon {
  font-size: 100px;
  color: #4c75a3;
  /*Цвет VK*/
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<i class="fa-brands fa-vk icon" aria-hidden="true"></i>

3. Использование корректных классов

класс fa-brands - Начиная с версии 5.1+ Font Awesome, добавили классы, такие как fa-brands (раньше fab), чтобы явно указывать на принадлежность к набору брендов, например => vk (Для иконок брендов, таких как VK, нужно использовать класс fa-brands/fab (Font Awesome Brands), а не fas или fa)

4. По поводу лицензии

в интернете и пишут, что они не бесплатные, а по 49 долларов

Font Awesome предоставляет два типа лицензий: бесплатную (Free) и платную (Pro)

платная, это иконки, где стоит значок pro, а в остальном множество бесплатных

5. Отладка ошибок

используйте консоль, F12 → Console, чтобы увидеть ошибки загрузки файлов. Красные ошибки GET указывают на проблемы с путями к файлам Также можно щелкнуть на ссылку по ошибке, чтоб увидеть полный путь, который браузер пытается загрузить - сравните его с фактическим расположением файлов в вашем проекте

БЛОГ НА HUSL