swellには基本機能として、Font Awesomeのフリーアイコンを使用できる機能が備わっています。
前回の記事で少しだけ触れたSWELLで使用できるアイコン について。
まず前提として、SWELLは一つ設定するだけでFont Awesomeの機能が使えますが、上でも書いてる通り無料版部分のみが対応。
きちんと全部のアイコンを利用したい場合は、個別にFont Awesomeに有料登録を行えば可能だとは思いますが、今回は手軽に使うのを目標にしているので「Font Awesomeの一部アイコンを使おう」というのが目標となります。
記事時点でFreeで使用できるアイコンは2020、styleはsolidがほとんどです。
有料版（記事時点で26,107 )と比べるとほんの一部ですが、それでもかなりの量です。
使いたいアイコンを検索する場合は、「Free」タブをアクティブにしてから行いましょう。
使いたいアイコンの名前（上で並べてるアイコンなら「ghost」）だけメモしておけば、挿入コードを自動で生成できるようなツールを最後に載せてますのでよかったら使ってみて下さい。
基本的な使い方についてはSWELLの公式でも説明されています。
Font Awesomeファイルを読み込む
[SWELL設定] ⇒ [Font Awesome]
以下のように設定して保存
Font Awesomeのアイコンサイトで使うアイコンのコードを取得
手動でアイコンコードを取得
Font Awesomeの無料アイコンページから、使いたいアイコンを選択しコードを取得します。
コード取得の際には、拡大や傾き、アニメーションなどの設定が行えますので、設定を行ってからコードを取得しましょう。
ただし、色の設定に関してはデフォルト推奨です（色の変更方法は後述）。
一例として、dice-sixを基礎に設定を追加したのがコチラ
<コード>
fa-sharp fa-solid fa-dice-six fa-bounce fa-xl
“”で囲まれたこの部分が、目的のコードとなります。
これを表示したい場所でショートコードとして埋め込みます。
実際に、XXXXのところに上のコードを埋め込むとこうなります。
例）サイコロ振ったら
例）色を変えたい場合は、コードを選択して色を変えます。
直感的にわかりづらいですが、ショートコードを選択しながら、そのショートコードにハイライト処理をすると、swell側でアイコンの色を変更してくれるようです。
自動でコード生成 （前置き）
icon class=”XXXX”
このXXXXのところにコードを埋め込めばいいのですが、FontAwesomeのページでやってみるとわかりますが、手間がかかりますね。
というわけで、XXXXのコードを作成してクリップボードにコピーしてくれるツールを作りました。
styleは一応項目は作りましたが、swellではほぼsolidしか対応していないと思います。
色変更に関しては、手動と同じく生成後にハイライトで対応して下さい。
使えないアイコン（及びその挙動）に関しては、バージョンか、(font awesomeの）有料版限定という理由が考えられます。
spinはできてもspin reverseはダメとかもあるので、うまく表示されない時はSWELLのショートコードでは使えないと思ってあきらめて別のstyleやアニメーションを使った方がよさそうです。
自動でコード生成 （javascriptツール）
【アイコン名】：※Font Awesomeサイトのアイコン名をクリックして（コピーされます）からペーストして下さい。例えば上で扱ったサイコロの場合は dice-six になります。
※設定に関しては、FontAwesomeの方で一度試してから入れてください（許されてない組み合わせがあります）
また、オプションの種類に関しては全数調査したわけではなく、今後も増えていく可能性が高いです。
なので、基礎的なオプションに対してコピーの手間を少し減らしてくれる程度と考えてください。
（追記）ツール部分のみを抜き出したページを作成しました
こちらは多少バージョンアップして、ショートコード全体を生成するようにしましたので、文中にコピペするだけでショートコードを呼び出せます。
コメント