Font AwesomeのWEBフォントでアイコンを指定し、文字と横並びにする方法(SCSS/@mixin)
アイコンの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のアイコン指定)を持たせています。
$position
はbefore
の値が入れば左に表示、それ以外は右に表示という構成ですので、
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が利用できる環境が前提となります。