Posted at

SCSSで画像をサイズ調整してアイコンとして組み込む方法

テンプレートっぽいのに

いつまで経っても覚えないのでメモとして書きました。


icon.scss

//普通の組み込み

.icon {
background-image: url('../images/icon.png');
width: 32px;
height: 32px;
background-position: center;
background-size: contain; //width, heightと同じになる
background-repeat: no-repeat;
}

//擬似要素の場合
.icon-with-text {
//つらつら
&:before {
content: '';
display: inline-block; //重要
width: 32px;
height: 32px;
background-image: url('../images/icon.png');
background-size: contain; //width, heightと同じになる
background-repeat: no-repeat;
vertical-align: middle; //文字に合わせて中央ぞろえになる
}
}


とりあえずdisplay:inline-blockが大事。