うと
Font Awesomeって便利でよく使うけど、毎回コピペしてくるのが面倒くさい！
しかもよく公式サイトがバグるし、たまに上手く表示されない文字もあったりして使いずらいんですよね…。
ということで、よく使うアイコンを一覧にまとめました。
Font Awesome「5」の理由
「Font Awesome」とは、Webサイトでアイコンフォントを導入することができるサービスのことです。
アイコンフォントはアイコン画像をテキストと同じように表示でき、色やサイズなどを簡単にカスタマイズすることができます。
「Font Awesome 6」が最新版ですが、「Font Awesome 5」を利用するWordPressテーマを使っているので、「Font Awesome 5」のアイコンをまとめています。
＼公式サイトはこちらから／
よく使うアイコン一覧
カテゴリー別に、アイコンとclassとHTMLソースを表示しています。
記号・マーク
| 名前 | アイコン | class | HTMLソース |
|---|---|---|---|
| インフォメーション | fas fa-info-circle | <i class="fas fa-info-circle"></i> | |
| エクスクラメーション | fas fa-exclamation-circle | <i class="fas fa-exclamation-circle"></i> | |
| クエスチョン | fas fa-question-circle | <i class="fas fa-question-circle"></i> | |
| 丸 | far fa-circle | <i class="far fa-circle"></i> | |
| バツ | fas fa-times | <i class="fas fa-times"></i> | |
| 星 | fas fa-star | <i class="fas fa-star"></i> | |
| ハート | fas fa-heart | <i class="fas fa-heart"></i> | |
| クラウン | fas fa-crown | <i class="fas fa-crown"></i> | |
| ベル | fas fa-bell | <i class="fas fa-bell"></i> | |
| 卒業帽 | fas fa-graduation-cap | <i class="fas fa-graduation-cap"></i> | |
| トロフィー | fas fa-trophy | <i class="fas fa-trophy"></i> | |
| チェック | fas fa-check | <i class="fas fa-check"></i> | |
| チェック（丸） | fas fa-check-circle | <i class="fas fa-check-circle"></i> | |
| GOOD | fas fa-thumbs-up | <i class="fas fa-thumbs-up"></i> | |
| BAD | fas fa-thumbs-down | <i class="fas fa-thumbs-down"></i> | |
| 指差し（右） | fas fa-hand-point-right | <i class="fas fa-hand-point-right"></i> | |
| 戻る | fas fa-undo | <i class="fas fa-undo"></i> | |
| ペン | fas fa-pen | <i class="fas fa-pen"></i> | |
| 本 | fas fa-book | <i class="fas fa-book"></i> |
ネット・SNS
| 名前 | アイコン | class | HTMLソース |
|---|---|---|---|
| 検索 | fas fa-search | <i class="fas fa-search"></i> | |
| QRコード | fas fa-qrcode | <i class="fas fa-qrcode"></i> | |
| フォルダ | fas fa-folder | <i class="fas fa-folder"></i> | |
| タグ | fas fa-tags | <i class="fas fa-tags"></i> | |
| 編集 | fas fa-edit | <i class="fas fa-edit"></i> | |
| コピー | fas fa-copy | <i class="fas fa-copy"></i> | |
| 切り取り | fas fa-cut | <i class="fas fa-cut"></i> | |
| 貼り付け | fas fa-paste | <i class="fas fa-paste"></i> | |
| 表 | fas fa-table | <i class="fas fa-table"></i> | |
| 画像 | fas fa-image | <i class="fas fa-image"></i> | |
| コメント | fas fa-comment | <i class="fas fa-comment"></i> | |
| コード | fas fa-code | <i class="fas fa-code"></i> | |
| スマホ（スマートフォン） | fas fa-mobile-alt | <i class="fas fa-mobile-alt"></i> | |
| タブレット | fas fa-tablet-alt | <i class="fas fa-tablet-alt"></i> | |
| Apple | fab fa-apple | <i class="fab fa-apple"></i> | |
| WordPress | fab fa-wordpress | <i class="fab fa-wordpress"></i> | |
| fab fa-twitter | <i class="fab fa-twitter"></i> | ||
| YouTube | fab fa-youtube | <i class="fab fa-youtube"></i> | |
| fab fa-facebook | <i class="fab fa-facebook"></i> | ||
| Wi-Fi | fas fa-wifi | <i class="fas fa-wifi"></i> | |
| 電源 | fas fa-power-off | <i class="fas fa-power-off"></i> | |
| bluetooth | fab fa-bluetooth | <i class="fab fa-bluetooth"></i> | |
| ビデオ | fas fa-video | <i class="fas fa-video"></i> | |
| 電話 | fas fa-phone | <i class="fas fa-phone"></i> | |
| ゴミ箱 | fas fa-trash-alt | <i class="fas fa-trash-alt"></i> |
人物・動物
| 名前 | アイコン | class | HTMLソース |
|---|---|---|---|
| スマイル | fas fa-smile | <i class="fas fa-smile"></i> | |
| スマイルビーム | fas fa-smile-beam | <i class="fas fa-smile-beam"></i> | |
| サプライズ | fas fa-surprise | <i class="fas fa-surprise"></i> | |
| にやにや | fas fa-grin-alt | <i class="fas fa-grin-alt"></i> | |
| うーん | fas fa-meh | <i class="fas fa-meh"></i> | |
| 悲しい（ぴえん） | fas fa-sad-tear | <i class="fas fa-sad-tear"></i> | |
| 紅潮 | fas fa-flushed | <i class="fas fa-flushed"></i> | |
| しかめっ面 | fas fa-frown | <i class="fas fa-frown"></i> | |
| ユーザー（1人） | fas fa-user | <i class="fas fa-user"></i> | |
| ユーザー（複数） | fas fa-users | <i class="fas fa-users"></i> | |
| 人物（ネクタイ） | fas fa-user-tie | <i class="fas fa-user-tie"></i> | |
| 肉球 | fas fa-paw | <i class="fas fa-paw"></i> | |
| 猫 | fas fa-cat | <i class="fas fa-cat"></i> | |
| 犬 | fas fa-dog | <i class="fas fa-dog"></i> | |
| 馬 | fas fa-horse | <i class="fas fa-horse"></i> | |
| 魚 | fas fa-fish | <i class="fas fa-fish"></i> |
旅行・マップ
| 名前 | アイコン | class | HTMLソース |
|---|---|---|---|
| マップ | fas fa-map-marker-alt | <i class="fas fa-map-marker-alt"></i> | |
| ショッピングカート | fas fa-shopping-cart | <i class="fas fa-shopping-cart"></i> | |
| スーツケース | fas fa-suitcase | <i class="fas fa-suitcase"></i> | |
| チケット | fas fa-ticket-alt | <i class="fas fa-ticket-alt"></i> | |
| 食事 | fas fa-utensils | <i class="fas fa-utensils"></i> | |
| ハンバーガー | fas fa-hamburger | <i class="fas fa-hamburger"></i> | |
| アイスクリーム | fas fa-ice-cream | <i class="fas fa-ice-cream"></i> | |
| ワイングラス | fas fa-wine-glass-alt | <i class="fas fa-wine-glass-alt"></i> | |
| 車 | fas fa-car | <i class="fas fa-car"></i> | |
| タクシー | fas fa-taxi | <i class="fas fa-taxi"></i> | |
| バス | fas fa-bus-alt | <i class="fas fa-bus-alt"></i> | |
| トラック | fas fa-truck | <i class="fas fa-truck"></i> | |
| 地下鉄 | fas fa-subway | <i class="fas fa-subway"></i> | |
| 飛行機 | fas fa-plane | <i class="fas fa-plane"></i> | |
| ケーブル | fas fa-tram | <i class="fas fa-tram"></i> | |
| 船 | fas fa-ship | <i class="fas fa-ship"></i> | |
| ベッド | fas fa-bed | <i class="fas fa-bed"></i> | |
| トイレ | fas fa-restroom | <i class="fas fa-restroom"></i> | |
| ガソリンスタンド | fas fa-gas-pump | <i class="fas fa-gas-pump"></i> | |
| 家 | fas fa-home | <i class="fas fa-home"></i> | |
| ビル | fas fa-building | <i class="fas fa-building"></i> | |
| 学校 | fas fa-school | <i class="fas fa-school"></i> |
まとめ
まとめるのに時間はかかりましたが、次回からはこれをみてコピペするだけなので時短になりそうです。
よろしければブックマークして使ってください。
コメント