0

Почему некоторые иконки не работают? (Это бесплатная иконка)

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

.fa-location-dot {
  font-size: 40px;
  color: #222;
}
<div>
  <i class="fa-solid fa-location-dot"></i>
</div> 

1
  • Возможно потому, что вы переопределяете класс fa-location-dot. Для изменения размера, цвета и т.д. используйте отдельный класс
    – SwaD
    28 ноя 2022 в 21:18

1 ответ 1

1

А как Вы подключаете стили Font Awesome? При подключении css-файла с CDN всё работает.

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

.fa-location-dot {
  font-size: 40px;
  color: #222;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<div>
  <i class="fa-solid fa-location-dot"></i>
</div>

4
  • Я тоже через CDN, но почему-то не работает
    – Alexsander
    28 ноя 2022 в 22:01
  • @Alexsander А если взять строку подключения, которую я использовал в ответе, и использовать в вашем проекте - сработает?
    – Gene Erbin
    28 ноя 2022 в 22:03
  • @Alexsander В самом вопросе отсутствует подключение css-файла, может добавите в вопрос вашу ссылку, которую вы подключаете?
    – Gene Erbin
    28 ноя 2022 в 22:09
  • да, ты прав css нужно было подключить, а не только js
    – Alexsander
    29 ноя 2022 в 8:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.