今回はアイコンを使わずに、CSSだけでプラス・マイナスアイコンを作る方法を紹介します。
CSSだけでアイコンっぽいものを作るとなると面倒なイメージですが、プラス・マイナスアイコンくらいなら全然難しくありません。
イメージは縦横20pxの丸いアイコンです。背景色はグレーで、アイコン自体は白にします。
HTML
<div class="icon mB20">
<span class="icon__mark"></span>
</div>
<div class="icon icon--plus">
<span class="icon__mark"></span>
</div>
spanに擬似要素を使ってプラス・マイナスを作ります。
divはグレーの背景色などを指定するのに使います。
CSS
.mB20 {
margin-bottom: 20px;
}
.icon {
position: relative;
width: 20px;
height: 20px;
background: #ccc;
border-radius: 50%;
}
.icon::before, .icon--plus::after {
position: absolute;
top: 9px;
left: 50%;
content: '';
display: inline-block;
width: 13px;
height: 13px;
border-top: 2px solid #fff;
transform: translateX(-50%);
}
.icon--plus:after {
top: 3px;
left: -3px;
transform: rotate(90deg);
}
プラス・マイナスはborderを使って作ります。
マイナスの場合はborderが1つ、プラスの場合は::afterで線をもう一本作って90度傾ければいいだけですね。
割と簡単に作れるので、ぜひやってみてください。