Блог

Главная - Вопросы по программированию - Кажется, я не могу связать мой шрифт awesome в качестве CSS с моим проектом

Кажется, я не могу связать мой шрифт awesome в качестве CSS с моим проектом

#html #font-awesome

Вопрос:

Я пытаюсь использовать шрифт awesome в своем проекте.

Я следовал инструкциям на их веб-сайте о том, как загрузить его напрямую и использовать в своем проекте.

Вот как я включил его в свои теги ссылок.

 <link rel="stylesheet" href="vendors/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/css/MarkerCluster.css">
<link rel="stylesheet" href="vendors/css/MarkerCluster.Default.css">  
<link rel="stylesheet" href="vendors/css/font-awesome.css" />
<link rel="stylesheet" href="vendors/leafletJs/leaflet.css" />
<link rel="stylesheet" href="vendors/css/easy-button.css" />  
<link rel="stylesheet" href="vendors/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="libs/css/style.css">

Мой код:

           <td class="boldFont"><i class="fas fas-camera-retro fas-lg"></i>Region:</td>
          <td id="region"></td>
        </tr>
        <tr>
          <td class="boldFont"><i class="fas fas-camera-retro fas-lg"></i>Subregion:</td>
          <td id="sub-region"></td>
        </tr>                                 
        <tr>
          <td class="boldFont"><i class="fas fa-adjust"></i>Population:</td>
          <td id="population"></td>
        </tr>

2 из трех ничего не показывают, в то время как один из них показывает пустую маленькую коробочку (изображение ниже).
введите описание изображения здесь

Что именно я здесь делаю не так?

//ОБНОВЛЕНИЕ// Кроме того, когда я добавляю». / » в начале пути, я получаю следующее сообщение: «ПОЛУЧИТЬ http://localhost:8090/project1/vendors/webfonts/fa-solid-900.woff сеть::ОШИБКА 404 (Не найдена)».

Я не уверен, стоит ли об этом упоминать, но я запускаю это на XAMPP. Может ли это иметь какое-то отношение к этому?

Комментарии:

1. вы заглядывали в консоль разработчика, чтобы узнать, есть ли какие-либо ошибки, связанные с файлами, которые не удалось загрузить? Путь vendors/css/ ~ может быть, это /vendors/css/ вместо этого?

Ответ №1:

Вы должны поместить ./ в начале href.

 <link rel="stylesheet" href="./vendors/css/bootstrap.min.css">
<link rel="stylesheet" href="./vendors/css/MarkerCluster.css">
<link rel="stylesheet" href="./vendors/css/MarkerCluster.Default.css">  
<link rel="stylesheet" href="./vendors/css/font-awesome.css" />
<link rel="stylesheet" href="./vendors/leafletJs/leaflet.css" />
<link rel="stylesheet" href="./vendors/css/easy-button.css" />  
<link rel="stylesheet" href="./vendors/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="./libs/css/style.css">

Потому что путь к css-файлам в вашем случае считывается из index.html файла

Пример каталогов

введите описание изображения здесь

XAMMP

Попробуйте посмотреть, перейдет ли XAMMP в 1 каталог

 <link rel="stylesheet" href="/vendors/css/bootstrap.min.css">

Или

 <link rel="stylesheet" href="../vendors/css/bootstrap.min.css">

Комментарии:

1. Спасибо за ответ @aleksandar, когда я делаю, как вы предлагаете, консоль регистрирует «GET localhost:8090/project1/поставщики/веб-сайты/fa-solid-900.woff net::ERR_ABORTED 404 (не найден)». Я, не уверен, стоит ли упоминать, что я запускаю это на Xamp. Может ли это иметь какое-то отношение к этому?

2. @user16431107 может быть, попробуйте использовать «../» вместо»./», как я предлагал, если вы используете XAMP

3. @user16431107 Я обновил свой ответ, чтобы охватить оба случая каталогов при использовании XAMMP

4. если на изображении выше изображен корневой уровень и связанные с ним подпапки, то путь должен начинаться с / , а не ./ с или ../ и т. Д., Поскольку они являются директивами для перемещения вверх по иерархии папок.

5. Большая признательность за ваши ответы, Александр. Я пробовал ваши предложения, но безрезультатно. Я думаю, что это может быть проблемой с XAMPP и одной из конфигураций портов, так как я копаю глубже в Интернете и вижу, что другие люди сталкивались с аналогичными проблемами. Еще не пришли к решению.

Метки: ,