AFFINGER6には標準で搭載されているSVGのアイコンが複数あります。
それらのアイコンは以下のショートコードで簡単に使用する事ができるようになっています。
各アイコンは[st-i class="ここにコード" add_style=""]で表示できるようになっています。
また、AFFINGER6の機能でクラスを指定することで、簡単なアニメーションも使用することができます。
今回はAFFINGER6のアイコンについて解説していきます。
公式サイト非公開のAFFINGER専用アイコンも紹介しています
AFFINGER6アイコン
AFFINGER6にはSVG形式でアイコンが内蔵されています。
このアイコンはブロック内や記事の中、メニューにも使うことができて、視覚的感覚で視聴者に内容を伝えることができます。
AFFINGERのアイコンはコードに「st」が含まれています。
これはAFFINGERの前身である「STINGER（スティンガー）」に由来しています。
AFFINGERの公式マニュアルにもアイコンについてのページがあり、使い方なども解説されていますが、掲載されていないアイコンもあります。
アフィンガースタジオでは、AFFINGER6で使えるアイコンをすべて紹介していますので、是非参考にしてみてください。
AFFINGERアイコンの使い方
最初にAFFINGER6の内蔵アイコンの使い方を解説していきます。
使用方法自体は簡単ですが、様々な使い方があるので理解しておくようにしましょう。
記事中にアイコンを使う
記事の中でアイコンを使うときはショートコードを使用します。
各アイコンは[st-i class="ここにコード" add_style=""]で表示できます。
上記のコードの「ここにコード」部分に該当するアイコンコードを入力すればそのまま表示することができます。
基本的に記事で使用する際はこのコードを使用します。
ショートコードをコピペする際は「貼り付け」と「プレーンテキストで貼り付け」に注意しましょう。
文章の途中でアイコンを使いたい場合はショートーコードブロックで貼り付けないようにしましょう。
ショートコードブロックを使うと上記の表示になりますが、文書中に使いたい場合はテキストで貼り付ける必要があります。
テキストで貼り付けると以下の表示になります。
基本的にはパターンなどに登録して使うのがおすすめです。
テキストツールのコードから入力するようにしましょう。
ここでアイコンを選択すると記事の中にテキストでアイコン用のショートコードが埋め込まれます。
ブロックでアイコンを使う
アイコンはブロックの中でも使うことができます。
AFFINGERブロックではタイトル横のアイコンをドロップダウンから選ぶ事ができたり、アイコンクラスをいれることで好きなアイコンを選択することができます。
アイコンはAFFINGERボタンなどでも使えるようになっています。
メニューでアイコンを使う
メニューにもアイコンを設定することができます。
もちろんヘッダーやフッターなど、すべてのメニューに設定できるようになっています。
各メニューの設定方法
メニューのアイコンは<i class="ここにコード" aria-hidden="true" style=""></i>を使います。
アイコンの種類
基本アイコン
| 名称 / アイコン | クラス |
|---|---|
ペン | st-svg-pencil |
メモ | st-svg-file-text-o |
メモ（反転） | st-svg-file-text-o |
チェック | st-svg-check |
注意 | st-svg-exclamation-circle |
注意（反転） | st-svg-exclamation-triangle |
リンク | st-svg-link |
はてな | st-svg-question-circle |
虫めがね | st-svg-search |
虫めがね（plus） | st-svg-search-plus |
虫めがね（minus） | st-svg-search-minus |
プラス | st-svg-plus-thin |
マイナス | st-svg-minus-thin |
ハート | st-svg-heart |
ユーザー | st-svg-user |
コメント | st-svg-comment |
電球 | st-svg-lightbulb-o |
電球（三角） | st-svg-lightbulb |
お知らせ | st-svg-bullhorn |
ダイヤ | st-svg-diamond |
王冠 | st-svg-oukan |
初心者 | st-svg-bigginer_l |
インフォ | st-svg-info-circle |
マル | st-svg-circle-o |
バツ | st-svg-times |
ニジュウマル | st-svg-circle-w |
サンカク | st-svg-triangle |
バー | st-svg-border |
Like | st-svg-thumbs-o-up |
Like（反転） | st-svg-thumbs-up |
Bad | st-svg-thumbs-o-down |
Bad（反転） | st-svg-thumbs-down |
指差し | st-svg-hand-o-right |
指差し（反転） | st-svg-hand-right |
時計 | st-svg-clock-o |
表情（嬉） | st-svg-emotion-smile |
表情（普） | st-svg-emotion-meh |
表情（悲） | st-svg-emotion-frown |
その他アイコン
| 名称 / アイコン | クラス |
|---|---|
家（HOME） | st-svg-home |
目 | st-svg-eye |
目隠し | st-svg-eye-slash |
フォルダ | st-svg-folder |
フォルダ（open） | st-svg-folder-open-o |
ピン | st-svg-thumb-tack |
コピー | st-svg-copy |
カメラ | st-svg-camera |
カメラ（レトロ） | st-svg-camera-retro |
ペン | st-svg-pencil-square-o |
クレジット | st-svg-credit-card-alt |
お金 | st-svg-money |
外部リンク | st-svg-external-link |
カート | st-svg-shopping-cart |
マップ | st-svg-map-marker |
サインイン | st-svg-sign-in |
サインアウト | st-svg-sign-out |
目次 | st-svg-toc |
ダウンロード | st-svg-cloud-download |
ダウンロード2 | st-svg-download |
クリップ | st-svg-paperclip |
ロック | st-svg-lock |
ロック（open） | st-svg-unlock-alt |
パソコン | st-svg-desktop |
タブレット | st-svg-tablet |
モバイル | st-svg-mobile |
プリント | st-svg-print |
チャート | st-svg-line-chart |
動画 | st-svg-youtube-play |
メール | st-svg-envelope-o |
メール（反転） | st-svg-envelope |
写真 | st-svg-picture-o |
ギフト | st-svg-gift |
スター | st-svg-star |
スター（half） | st-svg-star-half-o |
スター（反転） | st-svg-star-o |
プラグ | st-svg-plug |
本 | st-svg-book |
ブックマーク | st-svg-bookmark |
| st-svg-pdf-o | |
ZIP | st-svg-file-zip-o |
code | st-svg-code |
ベル | st-svg-bell |
トロフィー | st-svg-trophy |
魔法 | st-svg-magic |
タグ | st-svg-tag |
ショートコード | st-svg-shortcode |
紙飛行機 | st-svg-paper-plane |
カレンダー | st-svg-calendar |
写真 | st-svg-file-image-o |
フラッグ | st-svg-flag |
箱 | st-svg-inbox |
新聞 | st-svg-newspaper-o |
P | st-svg-product-hunt |
パレット | st-svg-palette |
ブランドアイコン
| 名称 / アイコン | クラス |
|---|---|
| st-svg-instagram | |
| st-svg-twitter | |
| st-svg-google | |
| st-svg-pinterest-p | |
Amazon | st-svg-amazon |
WordPress | st-svg-wordpress |
LINE | st-svg-line |
矢印アイコン
| 名称 / アイコン | クラス |
|---|---|
double-up | st-svg-double-up |
double-down | st-svg-angle-double-down |
double-right | st-svg-angle-double-right |
angle-down | st-svg-angle-down |
angle-right | st-svg-angle-right |
angle-up | st-svg-angle-up |
caret-right | st-svg-caret-right |
arrow-circle-o-right | st-svg-arrow-circle-o-right |
arrow-circle-right | st-svg-arrow-circle-right |
arrow-right | st-svg-arrow-right |
chevron-down | st-svg-chevron-down |
chevron-right | st-svg-chevron-right |
arrow | st-svg-arrow |
非公開アイコン
| 名称 / アイコン | クラス |
|---|---|
ブロック | st-svg-th-large |
歯車 | st-svg-cog |
歯車（複数） | st-svg-cogs |
共有 | st-svg-share-alt |
プラス（丸） | st-svg-plus-circle |
ページ | st-svg-pages |
レイアウト | st-svg-columns |
ヘッダー | st-svg-header |
ヘッダー下 | st-svg-h-under |
ヘッダー画像 | st-svg-h-gazou |
フォント | st-svg-font |
更新 | st-svg-refresh |
イカヅチ | st-svg-bolt |
速度 | st-svg-tachometer |
スライドショー | st-svg-slide-show |
| st-svg-facebook-square |
