よく使うfontawesomeのアイコンを羅列しておくストック用メモ!あくまでも自分用

よく使うfontawesomeのアイコンを羅列しておくストック用メモ!あくまでも自分用

fontawesomeのアイコンを普通よりも多く使う事が多くなりました。

プラグインを使って呼び出しても良いのですが…

プラグインはできるだけ少なくしたい。

スタイルシートもかなりの行数になってしまった…

fontawesomeのサイトでアイコンを探す事もあります。

が…よく利用するものは手元に置いておこう。

この投稿は自分で使う為のメモ記事です。

使えるアイコンがあるならコピーして使ってください。

fontawesomeに行けばいくらでも使えますけど…

よく使うfontawesomeアイコン

記事にする事でもありません。

投稿する必要性はありませんが、コピーすれば使えますので…

使いたい方はご自由に。

fontawesomeアイコン表

各ブログで各所に配置しているだけでなく、ウィジェットなどで使用したりします。

CSSに指定している以外で使用する大きさや色を表にしておきました。

サクッと記事に反映したい時などに自分のブログの記事からコピーする…

頻度が多くなったアイコンは追記しておこう…

まだまだ増えそうな予感です。

フォルダ・ファイル系

folder-open

folder-open
<i class=”fas fa-folder-open”></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”></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”></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”></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”></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”></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”></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”></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”></i>
yellowgreen fa-1x fa-2x fa-3x
Android Greenに近い色

iOS

fa-app-store-ios
<i class=”fab fa-app-store-ios”></i>
cornflowerblue fa-1x fa-2x fa-3x
iOS Colorは適当

他の色は下記でチェック!