Блог

Главная - Вопросы по программированию - Как я могу сделать социальную иконку видимой?

Как я могу сделать социальную иконку видимой?

#html #css

Вопрос:

Моя социальная иконка(ссылка) работала и была видна. И вдруг он исчез и не сработал.

HTML:

 <div class="social-icon"><a href="https://www.t.me/ta_kotoraya_ta" target="_blank"><i class="fab fa-telegram-plane"></i></a></div>

CSS:

 .social-icon {
  position: absolute;
  top: 885px;
  right: 2px;
  font-size: 30px;
}
.social-icon a {
  margin: 0 8px 0 0;
  color: rgba(14,13,13);
}
.social-icon a:hover {
  color: rgb(250, 3, 3);
}

https://codepen.io/tatarusetskaya/pen/XWpzNZa

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

1. проверьте, есть ли у вас fontavesome в вашем проекте.

2. Этот скрипт отсутствует в вашем html-файле. Добавьте нижеприведенную строку, и она появится. <скрипт src=’ kit.fontawesome.com/a076d05399.js ‘ crossorigin=’анонимный’>></скрипт>

Ответ №1:

Вы не импортировали шрифт Awesome. Добавьте это в <head> тег:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Результат

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

1. Спасибо! Он виден, но не работает как ссылка, и наведение тоже не работает. Можете ли вы помочь и ответить, почему? Спасибо.

2. @TataRusetskaya Похоже, что поле заголовка перекрывает значок. Я продолжу расследование.

3. это сработает, если я удалю поле социальной иконки a. Но в этом случае мне нужно заменить значок .social, и когда я это сделал, это не сработало. Это работает только тогда, когда .социальный значок справа: 2 пикселя. И поле социального значка a удалено, И мне нужен социальный значок: 10 пикселей.

Метки: