目次
目次

「いいね」ボタンのアイコンを変更する方法

スキンをカスタマイズ
この記事は約1分で読めます。
記事内に広告が含まれています。

はじめに

この記事では、「いいね」ボタンのアイコンを変更する方法について説明します。
簡単なCSSコードを追加するだけで、お好みのアイコンに変更できます。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    アイコン番号取得手順

    以下のリンクにアクセスし、アイコン番号を取得してください。

    Font Awesome
    The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free...
    fontawesome.com
    Font Awesome
    Font Awesome

    以下の手順で取得します。

    1. 検索ボタンをクリックします。
    2. Font Awesomeのバージョン「5.15.4」を選択します。
    3. 「Free」をクリックします。
    4. 変更したいアイコン名を入力します。
    5. 表示されたアイコンをクリックします。
    6. アイコン番号をクリックします。
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    .hvn .like {
  --like-icon: '\f0eb';           /* Font Awesomeアイコン番号 */
  --like-icon-color: #ffc107;     /* クリックした時のアイコンの色 */
}

さいごに

今回紹介した方法を使えば、「いいね」ボタンのアイコンを簡単に変更することができます。
CSSを少し追加するだけで、お好みのアイコンを設定でき、サイトのデザインをより個性的にすることが可能です。

タイトルとURLをコピーしました