Как изменить свойства значка fontawesome внутри div?

ProgramBox

Как изменить свойства значка fontawesome внутри div?

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#html #css #font-awesome

#HTML #css #шрифт-потрясающий

Вопрос:

Я пытался изменить значок на боковой панели навигации моего веб-сайта на бежевый, но, похоже, у меня это не получается…

Я знаю, что для этого мне следует переопределить свойство icon в CSS, однако я не уверен, какое свойство мне следует установить

Я пытался:

установка положения класса .fa-twitter на относительное
настройка цвета класса .fa-twitter на бежевый
создаем div для значков внутри родительского навигационного блока, затем меняем цвет класса fa-twitter на белый

примечания: Я использовал анимацию наведения для своей панели навигации, поэтому я хочу, чтобы это осталось

HTML:

 <div class="container">

  <div class="sidebar">
    <img id="mainicon" src="mainicon.png">
    <h2>Nikukurin</h2>

    <a href="http://twitter.com/nikukurin" i class="fa fa-twitter"></a>

    <hr>
    <a id="hvr-bounce-to-right" href="#">HOME</a>
    <a id="hvr-bounce-to-right" href="#">PORTFOLIO</a>
    <a id="hvr-bounce-to-right" href="#">COMMISSIONS</a>
    <a id="hvr-bounce-to-right" href="#">PRODUCTS</a>
  </div>
</div>

CSS:

 .container {
  display: flex;
  flex-direction: row;
}

.sidebar {
  text-align: center;
  position: fixed;
  width: 20%;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 200px;
  background: #ff9999;
  padding: 1%;
}

#mainicon {
  border-radius: 50%;
  width: 40%;
  padding: 3%;
}

.sidebar a {
  text-align: left;
  text-decoration: none;
  display: block;
  padding: 5%;
  color: beige;
  font-family: nikuhead;
  letter-spacing: 2px;
  position: relative;
  margin: 5%;
}

#hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffbc57;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#hvr-bounce-to-right:hover,
#hvr-bounce-to-right:focus,
#hvr-bounce-to-right:active {
  color: #ff6666;
  text-decoration: none;
}

#hvr-bounce-to-right:hover:before,
#hvr-bounce-to-right:focus:before,
#hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

выводите прямо сейчас:

вывод, который я хочу: прямо под «nikukurin» должен быть значок Twitter, и он должен быть белым, но того же цвета, что и фон div

спасибо, что нашли время прочитать это, и спасибо всем, кто ответил на расширенном!

1. Это недопустимая разметка: i class="fa fa-twitter" . Что это i ?

2. Также я не вижу ни одного правила в вашем CSS, которое предназначалось бы для вашей гиперссылки (т.Е.: .fa-twitter )?

3. Должен быть i элемент, заключенный в a ( <a href="..."><i class="fa fa-twitter"></i></a> . По соглашению, FontAwesome перегружает i значение «значок» вместо «курсив».

4. привет, ребята! Я получил ответ! Я опубликовал свой ответ в этом сообщении на случай, если у кого-то еще возникнет этот вопрос. Большое спасибо за помощь!

Ответ №1:

хорошо, я нашел ответ!

итак, что я делал неправильно, так это именно эту строку:

<a href="http://twitter.com/nikukurin" i class="fa fa-twitter"></a>

который должен был быть

<a href="http://twitter.com/nikukurin"> <i class="fa fa-twitter"></i></a>

Ответ №2:

Во-первых, вам не хватает синтаксиса ,

 <a href="http://twitter.com/nikukurin"><i class="fa fa-twitter"></i></a>

И если это не изменит цвет, то:

 .sidebar a{
    color : white;
}

Ответ №3:

ваш код должен быть изменен на этот:

 <a href="http://twitter.com/nikukurin"> <i class="fa fa-twitter"></i> </a>

Ответ №4:

Я не могу четко понять вопрос, но все, что я понял, вы должны сначала исправить синтаксис html

 <a href="http://twitter.com/nikukurin"> <i class="fa fa-twitter"></i></a>

он покажет вам значок, затем примените css для изменения цвета значка

 .sidebar a{color:#F5F5DC}