アイコンの下にCSS回転テキストが表示される

Question

複数のアイコン間でテキストを回転したい。 CSS回転を使用すると、テキストはアイコンの上に表示されます。

オリジナル外観：

HTML：

<div class="col-sm-1 col-md-1 col-lg-1 traindir"> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
    <div class="traindir-text">Färdriktning</div> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
    <i class="fa fa-arrow-up traindir-arrow"></i> 
</div> 

はCSS：

.traindir { 
    margin-top: 200px; 
    font-size: 20px; 
} 

.traindir-text { 
    -ms-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -ms-transform-origin: center center 0; 
    -webkit-transform-origin: center center 0; 
    transform-origin: center center 0; 
} 

私が回転した後、私はこれを取得：

私はあなたが問題を見ることができると思う、私はそれをカバーしていない、テキストの上に矢印が欲しい。 CSSの表示、高さ、幅のプロパティを変更しようとしましたが、それは役に立たなかった。何か解決策はありますか？

Answer 1

writing-mode（MDN）は、ここではオプションです。

VIEW DEMO FULLスクリー N

.traindir { 
 
    font-size: 20px; 
 
    writing-mode: vertical-lr; 
 
    transform: rotate(180deg); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="col-sm-1 col-md-1 col-lg-1 traindir"> 
 

 
    <i class="fa fa-arrow-down"></i> 
 
    <i class="fa fa-arrow-down"></i> 
 
    <i class="fa fa-arrow-down"></i> 
 
    <span class="traindir-text">Färdriktning</span> 
 
    <i class="fa fa-arrow-down"></i> 
 
    <i class="fa fa-arrow-down"></i> 
 
    <i class="fa fa-arrow-down"></i> 
 
</div>

残念ながら、回転が必要である（そして下向き矢印）RL/LRとしてここに

の方向を反転しません