テキストに矢印やアイコンをつけたい。
かっこよくするために、昔は画像で作っていちいち貼り付けていました。
しかし、スマホ対応・レスポンシブデザインとなるとCSSの設定など面倒な作業が増え、見かけもあんまり…。
そこで便利なのが「Font Awesome」です。
「Font Awesome」ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
Font Awesomeには、無料プランと、有料のPROプランがあります。 PROプランだとアイコンの種類が多く、さらに複数の太さのアイコンを使うことができます。無料分でも十分使えます。
使用するには、自分のサーバーにアイコンフォントのデータをアップロードして使う方法もありますが、『CDN』を利用するのが簡単で便利です。
CDNとは、CDN先のサーバーにあるデータを読み込んで、自分のサイトに表示・利用できる仕組みです。
[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]
こちらのサイトを参考に簡単に書きました。
もっと詳しく知りたい方はこちらのブログへ
