[解決済み】Font AwesomeのアイコンをCSSのコンテンツとして使用する。
質問
Font AwesomeのアイコンをCSSのコンテンツとして使いたいのですが、どうすればいいですか?
a:before {
content: "<i class='fa...'>...</i>";
}
でHTMLコードを使用できないことは知っています。
content
ということは、あとは画像だけなのでしょうか?
解決方法は?
FontAwesome 5のアップデート ありがとうございます Aurelien
を変更する必要があります。
font-family
から
Font Awesome 5 Brands
または
Font Awesome 5 Free
レンダリングしようとするアイコンの種類に基づきます。また
font-weight: 900;
a:before {
font-family: "Font Awesome 5 Free";
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
アイコンとテキストの間のスペースについて、どのように機能するか、またいくつかの回避策を知るために、以下の回答の残りを読むことができます。
FontAwesome 4以下
その使い方は間違っています。font awesomeスタイルシートを開き、その中の
class
使用したいフォントの
fa-phone
のように、そのクラスの content プロパティをエンティティでコピーして使用します。
a:before {
font-family: FontAwesome;
content: "\f095";
}
ただ、特定のターゲットを狙うなら
a
タグを使用することを検討してください。
class
のように、より具体的にすることができます。
a.class_name:before {
font-family: FontAwesome;
content: "\f095";
}
上記の方法では、アイコンがあなたの残りのテキストとくっつくので、2つの間に少しスペースを空けたい場合は、それを
display: inline-block;
を使用し、いくつかの
padding-right
:
a:before {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
この回答をさらに発展させると、多くの人がホバー時にアイコンを変更したいという要求を持っているかもしれません。
:hover
アクションを使用します。
a:hover:before {
content: "\f099"; /* Code of the icon you want to change on hover */
}
上記の例では、サイズが異なるためにアイコンが揺れてしまいますが、そのようなことは絶対に避けたいので、固定された
width
のような基本宣言に
a:before {
/* Other properties here, look in the above code snippets */
width: 12px; /* add some desired width here to prevent nudge */
}
関連
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み】CSSでFont Awesome アイコンを使用する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
js プログラミング共通のエラーです。Uncaught TypeError。XXXは関数ソリューションではありません
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] css画像が表示されない
-
[解決済み] divが重ならないようにするには?
-
[解決済み] HTML CSS インビジブルボタン