web-dev-qa-db-ja.com

2つのFont Awesomeアイコンを組み合わせる

2つのFont Awesomeアイコンを組み合わせてスタックを作成しようとしています。マージしようとしています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;
}

これが結果として得られるものです。

enter image description here

しかし、私は少し右に持っていきたいです。私はそれを行う方法がわかりませんか？それを少し正しくするために私は何ができますか？

cssfontsfont-awesomestacked
8
SSS

さて、あなたは自分の位置のためにあなた自身のCSSをしたので、次のようにtext-alignをrightに設定する必要があります：

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

これは実際の例です

問題は、見栄えが良くないということです。それで、それらがあなたに役立つ場合のいくつかの選択肢があります： 例1 、 例2

7
musefan

新しいクラスを追加することで、時計を右揃えにするか、左詰めにすることができます。以下のコードを参照してください。

.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>
0
Azeez Kallayi