使えるWEBアイコン「Font Awesome」を使おう

Font Awesome

テキストに矢印やアイコンをつけたい。
かっこよくするために、昔は画像で作っていちいち貼り付けていました。
しかし、スマホ対応・レスポンシブデザインとなるとCSSの設定など面倒な作業が増え、見かけもあんまり…。
そこで便利なのが「Font Awesome」です。

 


Font Awesome

 

「Font Awesome」ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
Font Awesomeには、無料プランと、有料のPROプランがあります。 PROプランだとアイコンの種類が多く、さらに複数の太さのアイコンを使うことができます。無料分でも十分使えます。

 

CDNを利用する

使用するには、自分のサーバーにアイコンフォントのデータをアップロードして使う方法もありますが、『CDN』を利用するのが簡単で便利です。
CDNとは、CDN先のサーバーにあるデータを読み込んで、自分のサイトに表示・利用できる仕組みです。

 

headタグ内に貼付け

[html]
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
[/html]

コピーしたコードをブログやWebサイトの〜の中に貼り付けます。
このコードを貼るだけで、fontawesomeにあるアイコンを使用する準備は完了です。

 

 

使いたいアイコンフォントを探して、コードをゲット

https://fontawesome.com/icons?d=gallery

 

グレーになっているアイコンは有料のPROでしか使用できません。

 

アイコンを選ぶと、コードが表示されます。
そのコードをhtml内の入れたい場所に入れれば完了です!

[html]
<i class="fas fa-angle-double-right"></i>あいうえお
[/html]

 

こちらのサイトを参考に簡単に書きました。
もっと詳しく知りたい方はこちらのブログへ

 

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

You may also like

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です