Font Awesome 4.7.0

フォント ＞ Font Awesome

選択肢一覧

　状態:- 　閲覧数:1,743 　投稿日:2017-07-11 　更新日:2020-01-25
アイコン表示形式
ライブラリ読込方法
アイコン表示記述場所

アイコン表示形式


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画像」何れが良いの？

　閲覧数:391　投稿日:2018-03-04　更新日:2018-03-04

現在の疑問


アイコン表示2方式
・何れが良いの？
・A.Icon Font 形式
・B.SVG画像形式

検索するも、長所短所が全く分からない
・非同期で動作することぐらい？
・アイコンフォントか？ SVG アイコンか？

現時点の結論


SVG画像形式
・読み込み方式は異なるけれども、記述方式は同じみたいなので、後から変更可能と判断
・新らしい方と思われる「SVG画像形式」を試してみることにした


・Font Awesome Icons
・アイコンをWebフォントで表示！ Font Awesomeの使い方
・アイコンフォントを使おう
・フォントアイコンの使い方 (FontAwesome)
・疑似要素にFont Awesomeのアイコンを使う（リンクタイプ別にアイコンを表示）

アイコンと文字の間にスペースを作る

　閲覧数:440　投稿日:2018-03-04　更新日:2019-06-30

アイコンと文字の間にスペースを作る


文字のすぐ横にコードを貼ると窮屈
・アイコンと文字の間に隙間を作る

・半角スペースで対応
・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


「Icon Font」を「Font Awesome」で統一



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Font Awesome 4.7.0 78
2 Font Awesome v5.0.8 65
3 Awesome Screenshot 50
4 Adobe Camera Raw 4.0 47
5 FotoSketcher 3.40 46
6 Web Components 44
7 「Icon Font」を「Font Awesome」で統一 43
8 Twitter Bootstrap 1.4 41
9 Twitter Bootstrap 2.0 41
10 FotoSketcher 3.10 40
11 font-size 37
12 Bookmark Sentry 36
13 Material Design 2014 年 35
14 Bootstrap 4 34
15 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 34
16 Tor Browser 34
17 Save As MHT 0.1.3 34
18 Crescent Eve 33
19 _notesフォルダ削除 33
20 Bootstrap 2.0 × Google MAP API 33
2024/10/12 8:56 更新
週間人気ページランキング ／ 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード ／ 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」＋「クリエイティブ・コモンズ・ライセンス」＋「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー ／ インデックスカラー ／ パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新