FontAwesomeの使い方

石川/ホームページの作り方・Webマーケティング・稼ぎ方

2020年4月2日 17:59

今回はWEB制作には欠かせないGoogleのアイコンサービス「FontAwesome」の使い方について解説させていただきます！

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を挿入する方法

FontAwesome公式サイトはこちら

解説動画

CSSでFontAwesomeを挿入する方法

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で指定をする */
}

この記事が気に入ったらサポートをしてみませんか？