html - 具有 Font Awesome 的 CSS 转换

Question

我正在尝试将 CSS 转换与 a 标记和 i 一起使用。到目前为止，我已经尝试通过向 a 标签和 i 标签添加类/id 来定位。还针对每个 .fa 类。我要么让文本或图标旋转。不是都。

Codepen 链接 http://codepen.io/anon/pen/woRyMG

 <div class="float-nav">
      <i class="fa fa-compass fa-4x menu-btn"></i>
  </div>
  <div class="main-nav">
    <!-- <a href="" class="fa fa-home">Home</a> -->
    <a href="#"><i class="fa fa-home" id="one" aria-hidden="true"></i>Home</a>
    <a href="#"><i class="fa fa-terminal" aria-hidden="true"></i>Projects</a>
    <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i>Blog</a>
    <a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i>CV</a>
  </div>

    <div class="container-fluid">
      <header>
        <div class="header-background">
          <div class="header-text">
            <p>Some Text Here </p>
          </div>
        </div>

      </header>

    </div>



body,
html,
header,
.container-fluid {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.main-nav,
.float-nav {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
}

.main-nav {
  /*display: none; toggle this to see animation on click*/
}

.main-nav a {
  margin-right: 2px;
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
}

.main-nav a:first-child {
  color: orange;
  -webkit-transform: rotate(-50deg);
}

.main-nav a:nth-child(2) {
  color: green;
}

.main-nav a:nth-child(3) {
  color: yellow;
}

.main-nav a:nth-child(4) {
  color: blue;
}

.active-nav {
  display: block;
}

.header-background {
  background: url("http://placehold.it/900x900") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  width: 100%;
}

Answer 1

您在 .main-nav a. 中缺少 display: inline-block 或 display: block。应该是:

.main-nav a {
  display: inline-block; /* Or block. Depends of what You need */
  margin-right: 2px;
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
}

同时添加不带前缀的transform到.main-nav a:first-child。所以它将是:

.main-nav a:first-child {
  color: orange;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

记住 - 在有前缀之后没有前缀。