JINのボタンにアイコンをプラスしてみた【グーテンベルク】

ども、くまです( ˶ˆ꒳ˆ˵ )

みなさん、JINのオリジナルアイコンを最大限活用できていますか？

一テーマとは思えないほどのクオリティと数のアイコンが用意されています。ほんと尊敬。

JINのオリジナルアイコンページ

（お気に入り必須）

度肝を抜かれたのはこちらのバイクのアイコンです。

---

こんな素敵なアイコンがあるなら、ぜひどこかで使いたい、、、この欲望はカスタマイザーなら当然ですよね？

そこで、この記事ではJINのボタンにアイコンをプラスしてみました♫

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。

JINのボタンにアイコンをプラスしてみた結果

とりあえずJINにあるボタンすべてにアイコンを打ち込んでみました！

右側にちょこんとあるだけでもいい感じですね♫

カスタマイズの流れ

今回のカスタマイズはグーテンベルクでやっていきます。

そのため、カスタマイズというか、、もう本当に秒で終わります（笑）

のちのちは、アイコンを変えたりクラシックエディタでもできるようにカスタマイズできたらいいな（他人事）

たったこれだけです。

しかも、CSSコードはめっちゃ短いです。

ボタンに高度な設定でクラス名追加

ボタンブロックを追加したあとに右側のサイドバーから高度な設定でクラス名を追加します。

高度な設定とか言ってますが、文字を書くだけです。

ボタンブロックを追加

高度な設定にクラス名を書くよ

今回のカスタマイズで入力してもらうクラス名は

plus-icon1

です。

CSSコードをコピペする準備

基本的にはこちらの2つの方法があります。

はじめての方は追加CSSが簡単なのでおすすめです。

追加CSSの詳しい使い方についてはこちら

カスタマイズのCSSコード

.plus-icon1 span a:after, .plus-icon1 div a:after {
    content: "\e902";
    position: absolute;
    right: 14px;
    font-family: "jin-icons";
}
.plus-icon1 div a:after {
    font-size: 27px;
    right: 6px;
}

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。