ITとdesign エンジニアのブログ by エンジ庭

IT業界のトレンドなどIT分野について学んだ事を書いていきます。プログラミング技術などについて現在Qiitaメインに書いてますので、そちらを参照ください。  https://qiita.com/kota_sho

Font awesome

font awesomeとは

webサイトなどでアイコンフォントを表示できるようにするサービス。様々なフォントがあり、好きなアイコンを自由に選んで使える。有名な企業やサービスのロゴマークなどもある。

使い方:

今回はCDNを使う方法をまとめます。

CDN(content Delivery service)とは、web上で送受信されるコンテンツをインターネット場で効率的に配送するために構築されたネットワークです。自分のサーバーを使わずに仮想サーバーを使わしてもらう、要はアイコンをダウンロードして自分のサーバーにアップロードしなくても使える。

詳細は下記参照

https://www.cdnetworks.co.jp/about/

Font Awesomeの使い方 流れ

1、HTMLにリンクを貼ろう

場所は、head内です。CSS参照するように書くのと同じ要領でont awesome使いますと書いておきましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>html_sample</title>
</head>
<body>

 

2、好きなアイコンを選ぼう

使う準備ができたので、早速使いたいアイコンを探しましょう。

こちらはfont awesomeのサイトで探せます。

下記参照

https://fontawesome.com

f:id:Arts91:20190919214807p:plain

3、好きな場所にアイコンを使おう

最後にHTMLの任意の場所に、コードを書きましょう。

<i class = "fas fa-名前><i>

<i class="fas fa-save"></i>

今回はsaveという名前のアイコンを使いました。

 

以上がfont awesomeの基本的な使い方。

また、font-awesomeは大きさなど細かい部分も調整できるので、また今度紹介します。