【html/CSS】ボタンにアイコンをつける方法

「文字だけのボタンじゃなくてアイコンをつけてわかりやすくしたい！」

ボタンにアイコンをつける方法を解説します。

【方法1】before,afterでアイコンを作る

「::before」と「::after」は疑似要素といって、CSSで各htmlタグの前後につけることができる要素です。

これをCSSを駆使してアイコンにします。

四角、線、くの字、丸とそれらを2つ組み合わせる形ならCSSだけで作ることができます。

position:absoluteで配置する

アイコンを作ったらposition:absoluteで位置調整します。

アイコンの位置を固定したいとき、before,after両方使いたいときはこの方法です。

アイコンのある位置に文字が被らないようpaddingで空白を作りましょう。

「::before」で白い丸を、「::after」で矢印を作って、それぞれposition: absoluteで位置調整しています。

ボタン

<style>
.example{
    display: block;
    width: 300px;
    box-sizing: border-box;
    background: #9ef4ff;
    padding: 15px 40px;
    text-align: center;
    position: relative;
}
.example::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}
.example::after{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
    position: absolute;
    top: calc(50% - 5px);
    left: 24px;
}
</style>
<a href="#" class="example">ボタン</a>

文章が長くてもアイコンの位置は変わりません。

文字の長いボタン文字の長いボタン

(一つなら)文字に並べる

「::before」「::after」は文字の前後につけることができます。

どちらかひとつで作れるアイコンならそのまま文字に並べることができます。

文字とアイコンの距離を近づけたいときに使います。

縦位置を調整するなら「vertical-align」を使いましょう。

ボタン

<style>
.example2{
    display: block;
    width: 300px;
    box-sizing: border-box;
    background: #9ef4ff;
    padding: 15px 25px;
    text-align: center;
}
.example2::after{
    content: "";
    display: inline-block;
    margin-left: 1em;
    vertical-align: 1px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
}
</style>
<a href="#" class="example2">ボタン</a>

文章が長いとき、アイコンは文字の後ろまたは前に付きます。

文字の長いボタン文字の長いボタン

【方法2】画像を使う

CSSで作るのが難しい複雑なアイコンは画像を探して持ってきましょう。

下記は私がよく使うアイコン画像配布サイトです。

• icooon-mono
• icon rainbow

2つとも似ていますが、違うアイコンを配布しているので、両方使っていいものを探しましょう。

backgroundを使う

画像を背景にして位置固定する方法です。

アイコンのある位置に文字が被らないようpaddingで空白を作りましょう。

ボタン

<style>
.example3{
    display: block;
    width: 300px;
    box-sizing: border-box;
    background: #9ef4ff url(https://csshtml.work/wp-content/uploads/mail.png) no-repeat 20px center / 30px auto;
    padding: 15px 15px 15px 60px;
    text-align: center;
}
</style>
<a href="#" class="example3">ボタン</a>

文章が長くてもアイコンの位置は変わりません。

文字の長いボタン文字の長いボタン

imgを並べる

imgとテキストを並べる方法です。文字とアイコンを近づけたいときに使います。

画像の縦位置は「vertical-align」で調整しましょう。

ボタン

<style>
.example4{
    display: block;
    width: 300px;
    box-sizing: border-box;
    background: #9ef4ff;
    padding: 15px  25px 15px 5px;
    text-align: center;
}
.example4 img{
    width: 30px;
    height: auto;
    margin-right: 15px;
    vertical-align: -10px;
}
</style>
<a href="#" class="example4"><img src="https://csshtml.work/wp-content/uploads/mail.png" alt=""/>ボタン</a>

文章が長いとき、アイコンは文字の後ろまたは前に付きます。

文字の長いボタン文字の長いボタン

【方法3】Font Awesomeを使う

Font Awesomeは文字がアイコンになるwebフォントです。

インライン要素として文字に並べます。

ボタン

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<style>
.example5{
    display: block;
    width: 300px;
    box-sizing: border-box;
    background: #9ef4ff;
    padding: 15px  25px 15px 5px;
    text-align: center;
}
</style>
<a href="#" class="example5"><i class="fab fa-twitter"></i>ボタン</a>

↓公式サイトはこちら

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

いろいろなアイコンが使えて便利ではありますが、バージョンの違いにより方法が変わるため、うまくいかないことがあります。

個人的には画像アイコンを使う方法の方がおすすめです。

【まとめ】ボタンにアイコンをつける方法

【方法1】before,afterでアイコンを作る
→カンタンなアイコンならCSSだけで完結できる

• position:absoluteで配置する
• (一つなら)文字に並べる

【方法2】画像を使う
→複雑なアイコンなら画像アイコンを探して表示させる

• backgroundを使う
• imgを並べる

【方法3】Font Awesomeを使う
→Webフォントとして画像アイコンを使う

以上、ボタンにアイコンをつける方法でした。