CSSでハートアイコンを作る方法【コピペでOK】

CSSで以下のようなハートマークのアイコンを作る方法です。
コピペでOKです。

html

<span class="heart"></span>

CSS

<style>
.heart {
    display: inline-block;
    color: #333;/*線の色*/
    position: relative;
    margin-top: 6px;/*要調整*/
    margin-left: 5px;/*要調整*/
    width: 9px;
    height: 9px;
    border-left: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    transform: rotate(-45deg) scale(1);/*scale要調整*/
    background: red;/*背景色*/
}
.heart:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -1px;
    width: 8px;
    height: 5px;
    border-radius: 5px 5px 0 0;
    border-top: solid 1px currentColor;
    border-left: solid 1px currentColor;
    border-right: solid 1px currentColor;
    background: red;/*背景色*/
}
.heart:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 8px;
    width: 5px;
    height: 8px;
    border-radius: 0 5px 5px 0;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    background: red;/*背景色*/
}
</style>

解説

.heartのcolorは線の色です。この1か所を指定すればOKです。

背景色を変えるには各要素のbackgroundを指定しましょう。
線が不要なときは線の色を背景色と同じ色にしましょう。

だいぶ複雑なつくりなのでどこか1px変更するのも大変です。
.heartのscale(1)の数値を変えることで大きさを変えることができます。

大きくし、背景がない状態だと一部気になるところがあるので、小さめのアイコンにするか、背景色があるアイコンにしましょう。

大きさを変えたら .heartのmarginを調節しましょう。

ハートの横に文字を続ける場合はその文字のmargin-leftを調節しましょう。

まとめ

少し複雑ですが、ハートアイコンを作ることができました。
線の色、背景色、大きさ、位置は必要に応じて調整してください。

以上、CSSでハートアイコンを作る方法でした。