html - 如何更改 div 内的 fontawesome 图标的属性？

Question

我一直在尝试将网站侧面导航栏上的图标更改为米色，但我似乎无法做到...

我知道我应该在 CSS 中覆盖图标的属性，但是，我不确定我应该设置哪个属性

我试过了：

• 将 .fa-twitter 类位置设置为相对
• 将 .fa-twitter 类颜色设置为米色
• 为父侧导航 div 中的图标创建一个 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”下面应该有一个推特图标，它应该是白色的，但它与 div 背景颜色相同

感谢您抽出宝贵时间阅读本文，并感谢任何提前回答的人！

标签： htmlcssfont-awesome

Answer 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>