Webアイコンを表示しよう！ ～FontAwesomeをCSSとSass(Scss)で使ってみる～

下記リンク先からFontAwesomeをダウンロードします。
http://fontawesome.io/

HTMLに下記を記載しfont-awesome.min.cssをインポートします。
※ファイルのパスはカレントディレクトリによって異なります。

<link rel="stylesheet" href="./css/font-awesome.min.css">

<i>タグのclass属性内に下記の記述を追加することでアイコンの大きさを変えることができます。

• fa-lg
• fa-2x
• fa-3x
• fa-4x
• fa-5x

<i class="fa fa-rocket" aria-hidden="true"></i>
<i class="fa fa-rocket fa-lg" aria-hidden="true"></i>fa-lg
<i class="fa fa-rocket fa-2x" aria-hidden="true"></i>fa-2x
<i class="fa fa-rocket fa-3x" aria-hidden="true"></i>fa-3x
<i class="fa fa-rocket fa-4x" aria-hidden="true"></i>fa-4x
<i class="fa fa-rocket fa-5x" aria-hidden="true"></i>fa-5x

例えば、上記のように記述した場合は下記のように定義されたスタイルが適用されます。

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i>タグのclass属性内に下記の記述を追加することでアイコンの角度を変えることができます

• fa-rotate-90　　　　　　 時計回りに90度回転
• fa-rotate-180　　　　　　時計回りに180度回転
• fa-rotate-270　　　　　　時計回りに270度回転
• fa-flip-horizontal　　　　水平方向に反転
• fa-flip-vertical　　　　　　垂直方向に反転

下記のスタイルが適用されます。

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

<i>タグのclass属性内に下記の記述を追加することでアイコンの回転させることができます

• fa-spin　　　2秒で1回転させる(時計回り)
• fa-pulse　　1秒で1回転させる（時計回り）※1回転を８ステップに分割して1ステップずつ動作する

下記のスタイルが適用されます。

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

アイコンのクラスに下記を追加することでアイコンを重ねて表示することができます

• アイコンの親タグ
  • fa-stack
• アイコンを表示するのタグ
  • fa-stack-1x　　アイコンの大きさを指定（親のと同じ大きさ）
  • fa-stack-2x　　アイコンの大きさを指定（親の2倍の大きさ）
  • fa-inverse　　　アイコンの色を白にする

下記のスタイルが適用されます。

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: $fff;
}

fa-ban on fa-camera