Font AwesomeのWEBフォントでアイコンを指定し、文字と横並びにする方法(SCSS/@mixin)のイメージ

Font AwesomeのWEBフォントでアイコンを指定し、文字と横並びにする方法(SCSS/@mixin)

  • CSS

アイコンのWEBフォントで有名なFont Awsome 4.7を利用して、
テキストの左または右にアイコンを表示するCSS(Sass/SCSS形式)をご紹介します。

よく使うデザインですので@mixin化することで使いまわしができるようにしました。
コーディングの効率化を図ることができると思いますので、是非参考にしてみてください。

目次

実際のコード

/* mixin
-----------------------------------------*/
@mixin icon-fa($position: before,$icon: "\f099") {
    @if $position == before {
        &:before {
            content: $icon;
            font-family: FontAwesome;
            @content;
        }
    }
    @else {
        &:after {
            content: $icon;
            font-family: FontAwesome;
            @content;
        }
    }
}

/* 使い方(Twitterアイコンを左に表示)
-----------------------------------------*/
.sample-ttl {
  @include icon-fa($position: before,$icon: "\f099") {
    font-size: 24px;
    color: #1DA1F2;
    margin: 0 8px 0 0;
  }
}

/* 使い方(Twitterアイコンを右に表示)
-----------------------------------------*/
.sample-ttl {
  @include icon-fa($position: after,$icon: "\f099") {
    font-size: 24px;
    color: #1DA1F2;
    margin: 0 0 0 8px;
  }
}

実装についての解説

ご紹介したCSSについて解説します。

@mixinの仕様

/* mixin
-----------------------------------------*/
@mixin icon-fa($position: before,$icon: "\f099") {
    @if $position == before {// もし$positionがbeforeなら
        &:before {// 要素の左側に
            content: $icon;// $iconで指定したアイコンを表示
            font-family: FontAwesome;// Font Awesomeで表示
            @content;// 追加でスタイルを指定することも可能に
        }
    }
    @else {// もし$positionがbefore以外なら
        &:after {// 要素の右側に
            content: $icon;// $iconで指定したアイコンを表示
            font-family: FontAwesome;// Font Awesomeで表示
            @content;// 追加でスタイルを指定することも可能に
        }
    }
}

この@mixinには必ず指定する引数として、$position(before or after)
$icon(Font Awesomeのアイコン指定)を持たせています。

$positionbeforeの値が入れば左に表示、それ以外は右に表示という構成ですので、
after以外の値を渡しても右に表示という指定になります。

アイコンのフォントサイズ・色・余白などはデザインによって変動するため
あとから追加スタイルが加えられるように@content指定を加えています。

CSS(Sass/SCSS形式)での利用について

/* 使い方(Twitterアイコンを左に表示)
-----------------------------------------*/
.sample-ttl {
  @include icon-fa($position: before,$icon: "\f099") {
    font-size: 24px;
    color: #1DA1F2;
    margin: 0 8px 0 0;
  }
}

/* 使い方(Twitterアイコンを右に表示)
-----------------------------------------*/
.sample-ttl {
  @include icon-fa($position: after,$icon: "\f099") {
    font-size: 24px;
    color: #1DA1F2;
    margin: 0 0 0 8px;
  }
}

@mixin@includeで呼び出すことで実際に適用することが可能です。

サンプルのコードでは、大きさを24px、色をTwitterのコーポレートカラー、
位置に応じて左か右に8pxの余白が入るように指定しています。

最後に

ご紹介したコードの実装はFont Awsome 4.7およびSassが利用できる環境が前提となります。

  1. SNIPPET
  2. CSS
  3. Font AwesomeのWEBフォントでアイコンを指定し、文字と横並びにする方法(SCSS/@mixin)