選択肢一覧
状態:-
閲覧数:2,244
投稿日:2017-07-11
更新日:2020-01-25
アイコン表示形式
ライブラリ読込方法
アイコン表示記述場所
2種類
・Icon Font
・SVG画像
Font Awesome CDN のアカウントを作成
・re3メール
・フォントフォルダ
CDN
2種類
・HTML経由 … iタグ使用
ライブラリ読込方法
アイコン表示記述場所
アイコン表示形式
2種類
・Icon Font
・SVG画像
ライブラリ読込方法
Font Awesome CDN のアカウントを作成
・re3メール
・フォントフォルダ
<script src="https://use.fontawesome.com/d48c24194a.js"></script>
・「Font Awesome CDN」は、「BootstrapCDN」と何が異なる？CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
・Font Awesome · BootstrapCDN by MaxCDNアイコン表示記述場所
2種類
・HTML経由 … iタグ使用
<i class="fa fa-address-book" aria-hidden="true"></i>
・CSS経由 … Unicode使用f2b9
アイコン表示形式は「Icon Font」「SVG画像」何れが良いの？
現在の疑問
アイコン表示2方式
・何れが良いの？
・A.Icon Font 形式
・B.SVG画像形式
検索するも、長所短所が全く分からない
・非同期で動作することぐらい？
・アイコンフォントか？ SVG アイコンか？
現時点の結論
SVG画像形式
・読み込み方式は異なるけれども、記述方式は同じみたいなので、後から変更可能と判断
・新らしい方と思われる「SVG画像形式」を試してみることにした
・Font Awesome Icons
・アイコンをWebフォントで表示！ Font Awesomeの使い方
・アイコンフォントを使おう
・フォントアイコンの使い方 (FontAwesome)
・疑似要素にFont Awesomeのアイコンを使う（リンクタイプ別にアイコンを表示）
アイコンと文字の間にスペースを作る
アイコンと文字の間にスペースを作る
文字のすぐ横にコードを貼ると窮屈
・アイコンと文字の間に隙間を作る
・半角スペースで対応
・fa-fwというクラス名を追加
<i class="fa fa-tasks fa-fw" ></i>
FontAwesomeではfa-fwという名前のclassをiタグに追加すると、前後に余白が作られるfa-fwクラス
・アイコン種類に関わらず、そのアイコンが取る幅を統一させる
・アイコンの大きさに応じて左右にスペースを作ってくれる
・「左右が詰まっているな」と感じたときに使うと、ちょうど良い隙間が出来たる（アイコン種類にもよる）
Font Awesome, the iconic font and CSS toolkit