使う準備
まずは下記metaタグをheadに入れる。

https://fontawesome.com/v5/icons/angle-left?s=solid

無料アイコン一覧
https://johobase.com/font-awesome-icon-font-list-free/

:before　で使うことができる

●アイコンフォントの装飾


【 HTML 】
<script src="https://kit.fontawesome.com/d801f0ead9.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">


【 CSS 】
.tel:before {
	font-family: 'FontAwesome';
	content: "\f00d";
	padding-right: 5px;
}


【 中で直接使う場合はこちら 】
<p class="formbtm"><a href="#"><i class="fas fa-envelope"> 予約優先</i></a></p>
内部CSS一覧
f105 <i class="fas fa-angle-right"></i>
f107 <i class="fas fa-angle-down"></i>
f106 <i class="fas fa-angle-up"></i>
f35a <i class="fas fa-arrow-alt-circle-right"></i>
f061 <i class="fas fa-arrow-right"></i>
f152 <i class="fas fa-caret-square-right"></i>
f151 <i class="fas fa-caret-square-upt"></i>
f00c <i class="fas fa-check"></i>
f14a <i class="fas fa-check-square"></i>
f058 <i class="fas fa-check-circle"></i>
f138 <i class="fas fa-chevron-circle-right"></i>
f0c4 <i class="fas fa-cut"></i>
f0c6 <i class="fas fa-paperclip"></i>
f192 <i class="fas fa-dot-circle"></i>
f28d <i class="far fa-stop-circle"></i>
f22d <i class="fas fa-genderless"></i>
f111 <i class="fas fa-circle"></i>
f140 <i class="fas fa-bullseye"></i>
f004 <i class="fas fa-heart"></i> <i class="far fa-heart"></i>
fb71 <i class="fab fa-jira"></i>
f0e0 <i class="fas fa-envelope"></i> <i class="far fa-envelope"></i>
f658 <i class="fas fa-envelope-open-text"></i>
f199 <i class="fas fa-envelope-square"></i>
f071 <i class="fas fa-exclamation-triangle"></i>
f098 <i class="fas fa-phone-square"></i>
f095 <i class="fas fa-phone"></i>
f3cd <i class="fas fa-mobile-alt"></i>
f039 <i class="fas fa-align-justify"></i>
f299 <i class="fab fa-envira"></i>
f06c <i class="fas fa-leaf"></i>
f18c <i class="fab fa-pagelines"></i>
f4d8 <i class="fas fa-seedling"></i>
f30b <i class="fas fa-long-arrow-alt-right"></i>
f303 <i class="fas fa-pencil-alt"></i>
f002 <i class="fas fa-search"></i>
f218 <i class="fas fa-cart-arrow-down"></i>
f062 <i class="fas fa-arrow-up"></i>
f02d <i class="fas fa-book"></i>
f073 <i class="far fa-calendar-alt"></i>
f4ad <i class="fas fa-comment-dots"></i>
f086 <i class="fas fa-comments"></i>
f069 <i class="fas fa-asterisk"></i>
f5d2 <i class="fas fa-atom"></i>
f1ad <i class="fas fa-building"></i>
f015 <i class="fas fa-home"></i>
f500 <i class="fas fa-user-friends"></i>
f007 <i class="fas fa-user"></i>
f108 <i class="fas fa-desktop"></i>
f022 <i class="far fa-list-alt"></i>
f55e <i class="fas fa-bus-alt"></i>
f1b9 <i class="fas fa-car"></i>
f554 <i class="fas fa-walking"></i>
f02c <i class="fas fa-tags"></i>
f02b <i class="fas fa-tag"></i>
f118 <i class="far fa-smile"></i>
f580 <i class="far fa-grin"></i>
f119 <i class="far fa-frown"></i>
f7b1 <i class="fab fa-jira"></i>
f651 <i class="fas fa-comment-dollar"></i>
f157 <i class="fas fa-yen-sign"></i>

ＣＳＳだけで実現できる。aタグのhover時だけくるくる回転させる事ができて便利！！


【 CSS 】

ずっと回転し続ける

a:hover .load {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}




くるっと1回転してゆっくり戻る

.circle-image {
  transition: 1.0s;
}
a:hover .circle-image {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transition: transform 0.2s ease-out;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
}




要素に楕円をつける

.hatena-module-circles .circle-image {
  border: 1px solid #dddddd;
  border-radius: 50%;
  margin: 2px;
}