FontAwesomeの使い方
今回はWEB制作には欠かせないGoogleのアイコンサービス「FontAwesome」の使い方について解説させていただきます！
・HTMLで挿入する場合
・CSSで挿入する場合
上記の２パターンがあります。
そのため、解説動画をHTML版とCSS版の二つに分けさせて頂きました！
では、早速使い方を覚えていきましょう！
導入の流れ（大筋）
1.FontAwesomeのデータを読み込むためのタグ（CDN）をHTMLのhead内に挿入
2.FontAwesomeのアイコンのタグをHTMLまたはCSSに挿入
導入は上記の２項目を終わらせるだけです！
とても簡単なのですが、FontAwesome旧バージョンと新バージョンとでは導入の仕方が違いますので、そのあたりで混乱すると思います★
CDNでフォントオーサムを利用するためのタグ
下記のタグをHTMLの<head></head>の中に埋め込むとFontAwesomeが利用できるようになります。
新バージョンを利用する場合
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">新バージョンを利用するためのページ↓
旧バージョンを使用する場合
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">旧バージョンを利用するためのページ↓
HTMLでFontAwesomeを挿入する方法
解説動画
CSSでFontAwesomeを挿入する方法
解説動画
CSSで挿入する時のコード
/* ■■■ Solid系の場合 ■■■ */
h1::before{
font-family: "Font Awesome 5 Free";/* 最後に「Free」と入力 */
content:"\XXXXXX";/* ← XXXX のところにアイコンのナンバーを入れる */
font-weight: 900;/* 900か400で指定をする */
}
/* ■■■ Brands系の場合 ■■■ */
h1::before{
font-family: "Font Awesome 5 Brands";/* 最後に「Brands」と入力 */
content:"\XXXXXX";/* ← XXXX のところにアイコンのナンバーを入れる */
font-weight: 900;/* 900か400で指定をする */
}
/* ■■■ 旧バージョンの場合 ■■■ */
h1::before{
font-family:FontAwesome;/* 最後に「Brands」と入力 */
content:"\XXXXXX";/* ← XXXX のところにアイコンのナンバーを入れる */
font-weight: 900;/* 900か400で指定をする */
}