問題タブ [font-awesome]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1377 参照

css - TwitterBootstrapアイコンとFontAwesomeアイコンの同等性を実現する方法

Ruby on Rails 3.2アプリでは、Twitter Bootstrap-Sassv2.0.3とFontAwesomeの両方をGemsとしてインストールしています。

ブートストラップアイコンの色を変更したいので、「FontAwesome」を使用しています。

私の問題は、私のアイコンが互いに整列しているという点で完全にずれていることです。

ここに画像の説明を入力してください ここに画像の説明を入力してください

何が起こっているのかというと、元の黒いアイコンと新しいアイコンが別々の場所にレンダリングされているということです。

Font Awesomeには、「この巨大な新しいアイコンのセットはFont Awesome GitHubプロジェクトでリクエストされ、Bootstrap2.0.3と同等のアイコンが含まれています」と書かれています。

形が同じになるようにアイコンを揃えるにはどうすればよいですか?それでもフォントを使用して色を操作できますか?

0 投票する
5 に答える
17886 参照

css - FontAwesomeアイコンを箇条書きとして使用する

font awesomeのユースケースの例は次のようになります(から抜粋):

このリストは、リスト項目が1行である限り、私の目的には問題なく表示されます。ただし、リストアイテムが複数行の場合、2行目以降は適切にインデントされません(デフォルト)。

これらのアイコンを標準のcssの箇条書きとして使用できると便利です。このようにすると、複数の行項目が自動的に適切にインデントされるためです。

これを実現するための簡単でエレガントな方法はありますか?このようなマークアップを使用できれば素晴らしいと思います。

つまり、特定のアイコンクラスを再利用しますが、それらをli要素の一部にします。

0 投票する
10 に答える
74637 参照

javascript - フォント (@font-face) が既に読み込まれているかどうかを知る方法は?

Font-Awesome を使用していますが、フォント ファイルが読み込まれていない間、アイコンが  で表示されます。

display:noneそのため、ファイルがロードされていない間、これらのアイコンが必要です。

これらのファイルがロードされ、最終的にアイコンを表示できるようになったことをどのように確認できますか?

編集: ページ全体が読み込まれる前にフォントが読み込まれる可能性があるため、ページが読み込まれるとき (onload) については話していません。

0 投票する
2 に答える
3449 参照

css - FontAwesomeアイコンの配置

私はbootstrap-sassとfont-awesome-sass-railsgemを使用しており、bootstrap-and-overrides.css.scssに追加することで、(グリフィコンから)重複するアイコンを正常に根絶しました。

しかし、今はアイコンが少しずれているという問題があります。グリフィコンは以前は完璧でした。今私は見ています:

ここに画像の説明を入力してください

アイコンを1ピクセルまたは2ピクセル下に移動したいと思います。助けてください。ありがとう。

0 投票する
1 に答える
430 参照

css - font-size を大きくしても、CSS Web フォントは DIV を展開しませんか?

サムネイルの大きなフォントで私がここに持っているものを見ることができます: http://unlockinglg.com/beta/index.html

ブートストラップでfont-awesomeを使用しています

ここに画像の説明を入力

0 投票する
3 に答える
7953 参照

jquery - フォント素晴らしいアイコンにイベントをバインドする方法は?

clickイベントを素晴らしいフォントアイコンにバインドしたいと思います。ただし、アイコン自体はクリックできません。追加のテキストを挿入した場合にのみ、そのテキストがバインドされます。

アイコン自体をバインドするにはどうすればよいですか?

0 投票する
7 に答える
232377 参照

css - 単一のリスト項目要素で、箇条書きに Font Awesome アイコンを使用する

Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) アイコンを CMS の順序付けられていないリストの箇条書きとして使用できるようにしたいと考えています。

CMS のテキスト エディターは生の HTML のみを出力するため、追加の要素/クラスを追加することはできません。

これは、マークアップが次のような場合にアイコンを表示することを意味します。

Font Awesome が別の font-family 属性を必要とする場合に最初に確認できる問題は、別の要素が必要になることです。

純粋なCSSを使用してこれは可能ですか? それとも、jQuery のようなものを使用して、各リスト項目の先頭に要素を追加する必要がありますか?

背景画像のフォールバックを使用できることはわかっていますが、可能であれば Font Awesome を使用することをお勧めします。

0 投票する
8 に答える
26962 参照

css - アイコン フォント (Font Awesome) を使用すると、少しぼやけて見え、太くなりすぎます

私は Font Awesome を使って自分のサイトでアイコンを作成しています。iPod Touch with Retina ディスプレイでは素晴らしく見えますが、私の iMac では少しぼやけていて、はっきりしていないように見えます。

デモ用の画像を次に示します。

ここに画像の説明を入力

ご覧のとおり、Retina ディスプレイの iPod Touch ではフォントが非常にきれいに鮮明に見えますが、iMac では少々粗末です。

これは何が原因ですか?これはアンチエイリアシングと関係がありますか?これについて何かできることはありますか?

0 投票する
6 に答える
37559 参照

internet-explorer-8 - InternetExplorer8にFontAwesomeが表示されない

私たちは最近、そのデザインの一部としてFontAwesomeに強く依存するWebサイトを開発しました。before:contentとそれらが提供するCSSで標準実装を使用しています。

何らかの理由で、FontAwesomeがIE8に表示されません。トラブルシューティングとさまざまな修正の試行にかなりの時間を費やしましたが、運がありませんでした。

私は持っています:

  • EOTのmimetypeをapplication/vnd.ms-fontobjectに設定します
  • OTF、TTFのmimetypeをapplication/octet-streamに設定します
  • すべてのCSSがロードされた後にHTML5Shivを実行しました。
  • ページの読み込み時にCSSまたはDOMを再読み込みするさまざまな試み

これがウェブサイトです:http : //www.tetakere.org.nz-HotlinksボックスはFontAwesomeの良い例です

このウェブサイトにFontAwesomeを表示させるための他のアプローチについて、誰かが何かアイデアを持っていますか?

0 投票する
2 に答える
49262 参照

html - 素晴らしいフォントのテキストグラデーション

すばらしいフォントを見つけたので、自分のウェブサイトで使用したいと思います。

問題は、フォントをグラデーションで色付けしたいということです。標準テキストで動作するこのコードを見つけましたが、Font Awesome のアイコンで動作させることはできません

これが私がテストしたものです:

そして、グラデーション、必要なアイコン、そして何もない「Hello world」が表示されました...

誰でも何か考えがありますか?

ありがとう