ホームへ

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

2022年06月15日

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

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

【方法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>

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【方法2】画像を使う

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

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

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>

↓公式サイトはこちら

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

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

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

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

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


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

  • backgroundを使う
  • imgを並べる

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ