フォントオーサムとは?
<i class="fas fa-spinner fa-spin fa-2x"></i>
<i class="fas fa-spinner fa-pulse fa-2x"></i>
<i class="fas fa-circle-notch fa-spin fa-2x"></i>
<i class="fas fa-sync fa-spin fa-2x"></i>
<i class="fas fa-cog fa-spin fa-2x"></i>
<i class="fas fa-stroopwafel fa-spin fa-2x"></i>
<i class="far fa-snowflake fa-pulse fa-2x"></i>このようにいい感じのアイコンを使えて、アニメーションにすることもできる。(一部有償)
またこのサイトにも使われている。
導入方法
公式サイト:https://fontawesome.com/
ユーザー登録をしてキットの名前を記述しCreate & Use This kitのボタンを押して↓の<script~></script>の部分を<head></head>の中に記述する
<script src="https://kit.fontawesome.com/c9ec8f1a4e.js" crossorigin="anonymous"></script>実例
<i class="fas fa-spinner fa-spin fa-2x"></i>fas fa-spinnerの部分がアイコン部分
fa-spinがアニメーション部分
fa-2xが大きさの部分
また色を変えたりアイコン同士を組み合わせて使うことも可能で
CSS疑似要素を使うことによって表示させることもできる
CSS疑似要素の場合
HTMLの記述
<h2 class="wp">WordPress</h2>CSSの記述
.wp::before {
content: "\f19a";
font-family: "Font Awesome 5 Brands";
font-weight: 400;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 10px;
color: #374188;
}WordPress
↑このようにアイコンが表示される