SWELLの新機能ボックスメニューで用意されてないアイコンを使う方法

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

SWELLの新しい機能のボックスメニューを試す

ver2.6.1 新しく追加された機能を使って早速BOXメニューを作ってみました。

自分が以前から使っているものと色を変えて同じものを作ってみました。

＊実際に動作するのでジャンプ注意

SWELLの高速化オプションで コンテンツに合わせて必要なCSSだけ読み込む がONなっていると
この新機能のボックスメニューは動きませんのでご注意を。

v.2.6.1.1
ボックスメニューブロックの表示が「コンテンツに合わせて必要なCSSだけを読み込む」をONにしたときに崩れる不具合を修正しました。

さすがSWELL。 ツイッターで呟いたら速攻で修正されてます。いつもありがとうございます！

用意されていないアイコンについて

ブロックメニューから色々便利に設定できてまったく言う事ないのですが

用意されているアイコン以外を使う方法をわかりやすく説明しますね。

見ての通りですが私の使用しているアイコンは元々ブロックメニューの中に用意されていないものが

いくつか混じってます。

設定項目の中に 「HTMLでsvgを記述する」があるのをお気づきの方も多いと思います。

コレを使用します。

FontAwesomeでアイコン一覧みてみよう

https://fontawesome.com/search?m=free (FontAwesome一覧ページ）

ここで好みのアイコンを探します。

試しに apple のロゴを探してみましょう

ページ上部の検索欄に apple で検索できます。

appleのアイコンをクリックするとこうなります。

この画面の中の </> をクリックすると 該当アイコンのSVGを取得できます。

copied と表示されれば 自分のクリップボードにSVGがコピーされてますので

SWELLのエディター画面に戻り

こんな感じでペースト。

これでSWELLの一覧にないアイコンも表記することが可能になります。