[CSS] 虫眼鏡アイコンをCSSだけで描きたい
- 検索フォームのボタンに虫眼鏡のアイコンがよく使われています
- 色々なサイトでアイコン画像が配布されていますし、フォントアイコンもありますが、あえてCSSだけで描いてみました
- サイズや色を自由に変えることができますし、描画時間的にも画像を使うより軽量です
サンプルコード
html
<span class="magnifying_glass"></span>
CSS
.magnifying_glass {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
color: #000;
font-size: 200px;
}
.magnifying_glass::before {
position: absolute;
top: 0px;
left: 0px;
width: 0.7em;
height: 0.7em;
box-sizing: border-box;
border: 0.15em solid currentColor;
border-radius: 50%;
background-color: #fff;
content: "";
}
.magnifying_glass::after {
position: absolute;
top: 0px;
left: 50%;
z-index: -1;
transform: rotate(-45deg);
width: 0.15em;
height: 1em;
box-sizing: border-box;
background-color: currentColor;
content: "";
}
- 各要素のサイズは「em」で単位を指定しているため、「.magnifying_glass」の「font-size」を変えるだけでアイコンのサイズを変更することができます
- 各要素の色も「currentColor」を使用しているので、「.magnifying_glass」の「color」を変えるだけでアイコンの色を変えることができます
- アイコンを配置する背景色が白以外になる場合は、「.magnifying_glass::before」の「background-color」の色を変更してください
CSSでアイコンを描いてみるシリーズ
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。