fontawesomeのアイコンを普通よりも多く使う事が多くなりました。
プラグインを使って呼び出しても良いのですが…プラグインはできるだけ少なくしたい。
スタイルシートもかなりの行数になってしまった…fontawesomeのサイトでアイコンを探す事もあります。
が…よく利用するものは手元に置いておこう。
この投稿は自分で使う為のメモ記事です。使えるアイコンがあるならコピーして使ってください。
fontawesomeに行けばいくらでも使えますけど…
当サイトでは、軽量化の為fontawesomeを読み込まないようにしています。
ただ、使用するアイコンが少数ですが決まっているのでSVGで表示しています。
（このページは単独で読み込んでいます）
SVGでアイコンを読ませる方法は下記で解説しています。
Pix524 Channel
SWELL風アイコン付きBOXを自作する方法｜SWELLカスタマイズの一例
SWELL風アイコン付きBOXSの自作方法。SWELLのアイコン付きBOXは色や大きさを変える事はできますが、アイコンが変えられなかったので自作する事にしました。軽量かつスムー…
Contents
よく使うfontawesomeアイコン
記事にする事でもありません。
投稿する必要性はありませんが、コピーすれば使えますので…
使いたい方はご自由に。
fontawesomeアイコン表
各ブログで各所に配置しているだけでなく、ウィジェットなどで使用したりします。
CSSに指定している以外で使用する大きさや色を表にしておきました。
サクッと記事に反映したい時などに自分のブログの記事からコピーする…
頻度が多くなったアイコンは追記しておこう…
まだまだ増えそうな予感です。
fontawesomeに対応している色名は下記になります。
色名をコピーしてお使いください。
<i class="fas fa-palette fa-2x" style="color: royalblue;"></i>フォルダ・ファイル系アイコン
folder-open
| folder-open | |||
| <i class=”fas fa-folder-open” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
file-alt
| file-alt | |||
| <i class=”fas fa-file-alt” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
矢印系アイコン
arrow-right
| arrow-right | |||
| <i class=”fas fa-arrow-right” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
arrow-alt-circle-right
| arrow-alt-circle-right | |||
| <i class=”fas fa-arrow-alt-circle-right” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
感嘆符アイコン
exclamatio-circle
| exclamation-circle | |||
| <i class=”fas fa-exclamation-circle” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
exclamation-triangle
| exclamation-triangle | |||
| <i class=”fas fa-exclamation-triangle” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
疑問符アイコン
question-circle
| question-circle | |||
| <i class=”fas fa-question-circle” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
チェックアイコン
check-square
| check-square | |||
| <i class=”fas fa-check-square” style=”color:royalblue;”></i> | |||
| silver | fa-1x | fa-2x | fa-3x |
| royalblue | fa-1x | fa-2x | fa-3x |
| firebrick | fa-1x | fa-2x | fa-3x |
| darkgreen | fa-1x | fa-2x | fa-3x |
| goldenrod | fa-1x | fa-2x | fa-3x |
| navy | fa-1x | fa-2x | fa-3x |
| purple | fa-1x | fa-2x | fa-3x |
アプリ系アイコン
android
| android | |||
| <i class=”fab fa-android” style=”color:royalblue;”></i> | |||
| yellowgreen | fa-1x | fa-2x | fa-3x |
| Android Greenに近い色 | |||
iOS
| fa-app-store-ios | |||
| <i class=”fab fa-app-store-ios” style=”color:royalblue;”></i> | |||
| cornflowerblue | fa-1x | fa-2x | fa-3x |
| iOS Colorは適当 | |||
他の色は下記でチェック！
Pix524 Channel
fontawesomeの色指定｜CSSを使わない表示方法とカラチャート
fontawesomeはCSSで表示させるだけでなく、その他にも様々な方法があります。特にCSSを読み込む事でページスピードがダウンするようなら方法も考え穴押す必要がありますね…
