Почему мой шрифт не загружает фоновые иконки? - PullRequest
Новая
       3

Почему мой шрифт не загружает фоновые иконки?

0 голосов
/ 25 апреля 2020

Я относительно новичок в разработке веб-сайтов и сейчас изучаю CSS. У меня возникла проблема, когда фоном для двух других значков были загружены, а 2-й нет. 

.bg-instagram {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.bg-whatsapp {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: green;
}

.bg-facebook {
  padding: 7px 13px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: #3b5998;
}
<div class="container shadow rounded-pill bg-white py-5">
  <p>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-instagram fa-2x text-white bg-instagram"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-whatsapp fa-2x text-dark bg-whatsapp"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-facebook fa-2x text-white bg-facebook"></i>
    </a>
  </p>
</div>

Я надеюсь, что кто-то может помочь мне выявить любые вопиющие проблемы, которые могут возникнуть у меня с кодом. Спасибо!

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

извините, что оставил вопрос висящим, я понял, что он не загружается, потому что мне пришлось жестко обновить sh браузер, чтобы загрузить css файл!

1 голос
/ 25 апреля 2020

Проверьте это, шрифт потрясающий работает. Я думаю, что вы забыли использовать шрифт awesome CDN.

Никакой иконки, которую я нашел по этому имени в шрифте awesome .fa-icon class. 

.bg-instagram {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.bg-whatsapp {
  padding: 7px 10px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: green;
}

.bg-facebook {
  padding: 7px 13px;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: #3b5998;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container shadow rounded-pill bg-white py-5">
  <p>your code</p>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-instagram fa-2x text-white bg-instagram"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-whatsapp fa-2x text-dark bg-whatsapp"></i>
    </a>
    <a class="fa-icon mx-4" href="#" title="">
      <i class="fa fa-facebook fa-2x text-white bg-facebook"></i>
    </a>
  <br /><br />
   <p>my different  code</p>
    <i class="fa fa-facebook-official" aria-hidden="true" style="background-color:blue; font-size:40px;"></i>
  <i class="fa fa-instagram" aria-hidden="true" style=" background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); font-size:40px;"></i>
  <i class="fa fa-whatsapp" aria-hidden="true" style="background-color:green; font-size:40px;"></i>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...