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

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

方法1.テキスト「i」を利用する

インフォ

html

<a href="#" class="info">インフォ</a>

CSS

.info::before{
    content: "i";
    font-size: 85%;
    margin-right: 5px;
    display: inline-block;
    vertical-align: 2px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    background: #4287f5;
    color: #FFF;
    font-weight: bold;
}

普通にテキストとして「i」マークを使っています。
font-familyを変更することで「i」マークも変更できます。

方法2.「i」に見えるようにブロックを作る

html

<a href="#" class="info2"></a>

CSS

.info2{
    display: block;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4287f5;
    color: #FFF;
    position: relative;
}

.info2::before{
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: calc(50% - 1.5px);
}

.info2::after{
    content: "";
    display: block;
    width: 3px;
    height: 8px;
    background: #FFF;
    position: absolute;
    bottom: 4px;
    left: calc(50% - 1.5px);
}

「i」の上の丸と下の棒をbefore,afterで表現しています。そのため、太さを変更したり、角を丸くしたり四角にしたり変更しやすいです。

まとめ

• 方法1.テキスト「i」を利用する
• 方法2.「i」に見えるようにブロックを作る

以上、CSSでインフォアイコンを作る方法でした。