フォントの変わったCSS変換

Question

aタグとiのCSS変換を使用しようとしています。これまでは、aタグとiタグにclass/idを追加してターゲットを設定しようとしました。また、各.faクラスを対象とします。私はテキストまたはアイコンを回転させる。両方ではありません。あなたは.main-nav a.にdisplay: inline-blockまたはdisplay: blockを逃している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

リンクcodepenします。それは次のようになります。

.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; 
} 

また.main-nav a:first-childに接頭辞なしtransformを追加します。したがって、それは次のようになります：

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

覚えている - 接頭辞なし。