Не могу получить фон для значков шрифтов - PullRequest
Новая
       22

Не могу получить фон для значков шрифтов

0 голосов
/ 15 февраля 2019

Итак, я пытаюсь получить потрясающую иконку шрифта, чтобы иметь фон для моего LinkedIn.Однако после его модификации ( из codepen.io ) и получения иконки от fontawesome.com .Я получил значок социальных сетей, чтобы показать, единственная проблема в том, что я хочу, чтобы фон отображал цвет при наведении курсора мыши, исключая стилизацию буквы или значка "без цвета" .Посмотрите разницу, когда вы наводите курсор мыши на Facebook против linkedin. Запустите фрагмент кода, чтобы увидеть, о чем я говорю. Я хочу, чтобы буква "in" была белой или пустой, и вместо этого поменяйте цвет на фон. 

#lab_social_icon_footer {
  padding: 40px 0;
  /* background-color: #dedede; */
}

#lab_social_icon_footer a {
  color: #333;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}


/*
    Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-li:hover {
  color: #4875B4;
}

#lab_social_icon_footer #social-fb:hover {
  color: #3399ff;
}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="lab_social_icon_footer">
  <div class="container">
    <div class="text-center center-block">
      <a href="#"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
      <a href="#"><i id="social-li" class="fa fa-linkedin fa-3x social"></i></a>
      <a href="mailto:#"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
    </div>
  </div>
</section>

1 Ответ

0 голосов
/ 15 февраля 2019

Просто используйте background-color, вместо свойства color css для селектора linkedin: hover. 

#lab_social_icon_footer {
  padding: 40px 0;
  /* background-color: #dedede; */
}

#lab_social_icon_footer a {
  color: #333;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}


/*
    Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-li:hover {
  background-color: #4875B4;
  border-radius: 10px;

}

#lab_social_icon_footer #social-fb:hover {
  color: #3399ff;

}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="lab_social_icon_footer">
  <div class="container">
    <div class="text-center center-block">
      <a href="#"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
      <a href="#"><i id="social-li" class="fa fa-linkedin fa-3x social"></i></a>
      <a href="mailto:#"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
    </div>
  </div>
</section>
...