以下はFontAwesomeでよく使うウェブアイコンまとめ。
Photoshopでテキストデータとして使いたい場合は、FontAwesomeをPCにインストール後、https://fontawesome.com/cheatsheet?from=ioから使いたいアイコンを探してコピペで利用する。豆腐文字になっちゃう場合は、フォントがちゃんとインストールできていないか、Photoshop側で書体「FontAwesome」に指定していないことがほとんど。
この記事の目次
お問い合わせ、コンタクト系
電話アイコン
電話マーク。「お電話はこちら」「お問い合わせはこちら」などに。
/* Unicode: f095 */
<i class="fa fa-phone" aria-hidden="true"></i>
/* Unicode: f098 */
<i class="fa fa-phone-square" aria-hidden="true"></i>
/* Unicode: f10b */
<i class="fa fa-mobile" aria-hidden="true"></i>
メールアイコン
封筒マーク。一般的な「メールはこちら」「フォームはこちら」などに。
/* Unicode: f003 */
<i class="fa fa-envelope-o" aria-hidden="true"></i>
アクセス系
地球儀
グローバル、ネットワークなどを表現する際に。
/* Unicode: f0ac */
<i class="fa fa-globe" aria-hidden="true"></i>
ピン
Google Mapでお馴染みのピン。
/* Unicode: f041 */
<i class="fa fa-map-marker" aria-hidden="true"></i>
SNS
facebookロゴアイコン。
/* Unicode: f09a */
<i class="fa fa-facebook" aria-hidden="true"></i>
/* Unicode: f230 */
<i class="fa fa-facebook-official" aria-hidden="true"></i>
twitterロゴアイコン。
/* Unicode: f099 */
<i class="fa fa-twitter" aria-hidden="true"></i>
/* Unicode: f081 */
<i class="fa fa-twitter-square" aria-hidden="true"></i>
Instagramロゴアイコン。
/* Unicode: f16d */
<i class="fa fa-instagram" aria-hidden="true"></i>
矢印、方向系
方向1
/* Unicode: f104 */
<i class="fa fa-angle-left" aria-hidden="true"></i>
/* Unicode: f105 */
<i class="fa fa-angle-right" aria-hidden="true"></i>
/* Unicode: f106 */
<i class="fa fa-angle-up" aria-hidden="true"></i>
/* Unicode: f107 */
<i class="fa fa-angle-down" aria-hidden="true"></i>
方向2
/* Unicode: f053 */
<i class="fa fa-chevron-left" aria-hidden="true"></i>
/* Unicode: f054 */
<i class="fa fa-chevron-right" aria-hidden="true"></i>
/* Unicode: f077 */
<i class="fa fa-chevron-up" aria-hidden="true"></i>
/* Unicode: f078 */
<i class="fa fa-chevron-down" aria-hidden="true"></i>
方向3
/* Unicode: f0d9 */
<i class="fa fa-caret-left" aria-hidden="true"></i>
/* Unicode: f0da */
<i class="fa fa-caret-right" aria-hidden="true"></i>
/* Unicode: f0d8 */
<i class="fa fa-caret-up" aria-hidden="true"></i>
/* Unicode: f0d7 */
<i class="fa fa-caret-down" aria-hidden="true"></i>