日別アーカイブ: 2021年8月11日

Font Awesomeのまとめ

コメントを残す

フォントオーサムとは?

<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

↑このようにアイコンが表示される