Почему некоторые значки FontAwesome не отображаются? - PullRequest
Новая
       5

Почему некоторые значки FontAwesome не отображаются?

1 голос
/ 24 февраля 2020

Я пытаюсь создать модуль обмена социальными сетями в моем Java веб-приложении. Я использую этот пример из w3schools . У меня уже были замечательные иконки в проекте, но по какой-то причине после добавления следующего кода работает только одна из них (социальные иконки или старые иконки на сайте). Они показывают квадратные значки или не значков при переключении с различными ссылками CDN Fontawesome css. 

     <link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
	crossorigin="anonymous">
    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- The social media icon bar -->
    <div class="icon-bar">
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="#" class="google"><i class="fa fa-google"></i></a>
      <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
      <i class='fa fa-brain'></i>          
      <i class='fa fa-calculator'></i>          
    </div>

Я не добавил код css из примера. Что я делаю не так?

Ответы [ 2 ]

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

Вы используете несколько иконок из fontawesome 5. Например, fa-brain. Вам необходимо соответствующим образом обновить css классы ссылок и шрифтов. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">

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

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
  <a href="#" class="google"><i class="fab fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
  <a href="#" class="calculator"><i class="fas fa-calculator"></i></a>
  <a href="#" class="brain"><i class="fas fa-brain"></i></a>
</div>
0 голосов
/ 24 февраля 2020

Значки работают нормально. 

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">

<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>

Проверьте Codepen: https://codepen.io/manaskhandelwal1/pen/YzXNNLw

В вашем коде есть еще одна вариация.

...