2つのフォント驚くばかりのアイコンを組み合わせる

Question

私は2つのフォント驚くばかりのアイコンを組み合わせてスタックを作成しようとしています。 fa-calendarとfa-clock-oのアイコンを結合しようとしています。これは、日時のアイコンが必要なためです。これは私が結果として得るものです

HTML

<span class="icon-stack"> 
    <i class="fa fa-calendar icon-stack-3x"></i> 
    <i class="fa fa-clock-o icon-stack-1x"></i> 
</span> 

CSS

.icon-stack { 
    position: relative; 
    display: inline-block; 
    width: 2em; 
    height: 5em; 
    line-height: 4em; 
    vertical-align: middle; 
} 
.icon-stack-1x, 
.icon-stack-2x, 
.icon-stack-3x { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 
.icon-stack-1x { 
    line-height: inherit; 
} 
.icon-stack-2x { 
    font-size: 1.5em; 
} 
.icon-stack-3x { 
    font-size: 2em; 
} 

：

だから、それらを結合するために、私はこれを試してみました。

しかし、私は右に少しを持って帰りたいと思います。私はそれをする方法を知らない？少し右に持っていくために私は何ができますか？

Answer 1

あなたがあなた自身のCSSを行っているだけでなく、位置あなただけのように、text-alignrightに設定する必要があります。

.icon-stack-3x { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: right; 
} 

Here is a working example

---

問題は見栄えしないこと、です。だからあなたのために使用する場合のためにいくつかの選択肢があります：Example 1、Example 2

Answer 2

あなたは時計を合わせることができますいずれかを右またはパディング左新しいクラス を追加することにより、以下のコードを参照してください。

.icon-stack { 
 
     position: relative; 
 
     display: inline-block; 
 
     width: 2em; 
 
     height: 5em; 
 
     line-height: 4em; 
 
     vertical-align: middle; 
 
    } 
 
    .icon-stack-1x, 
 
    .icon-stack-2x, 
 
    .icon-stack-3x { 
 
     position: absolute; 
 
     left: 0; 
 
     width: 100%; 
 
     text-align: center; 
 
    } 
 
    .icon-stack-1x { 
 
     line-height: inherit; 
 
    } 
 
    .icon-stack-2x { 
 
     font-size: 1.5em; 
 
    } 
 
    .icon-stack-3x { 
 
     font-size: 2em; 
 
    } 
 
.right_align { padding-left:5px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<span class="icon-stack"> 
 
    <i class="fa fa-calendar icon-stack-3x"></i> 
 
    <i class="fa fa-clock-o icon-stack-1x right_align"></i> 
 
</span>