問題タブ [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.
css - TwitterBootstrapアイコンとFontAwesomeアイコンの同等性を実現する方法
Ruby on Rails 3.2アプリでは、Twitter Bootstrap-Sassv2.0.3とFontAwesomeの両方をGemsとしてインストールしています。
ブートストラップアイコンの色を変更したいので、「FontAwesome」を使用しています。
私の問題は、私のアイコンが互いに整列しているという点で完全にずれていることです。
何が起こっているのかというと、元の黒いアイコンと新しいアイコンが別々の場所にレンダリングされているということです。
Font Awesomeには、「この巨大な新しいアイコンのセットはFont Awesome GitHubプロジェクトでリクエストされ、Bootstrap2.0.3と同等のアイコンが含まれています」と書かれています。
形が同じになるようにアイコンを揃えるにはどうすればよいですか?それでもフォントを使用して色を操作できますか?
css - FontAwesomeアイコンを箇条書きとして使用する
font awesomeのユースケースの例は次のようになります(例から抜粋):
このリストは、リスト項目が1行である限り、私の目的には問題なく表示されます。ただし、リストアイテムが複数行の場合、2行目以降は適切にインデントされません(デフォルト)。
これらのアイコンを標準のcssの箇条書きとして使用できると便利です。このようにすると、複数の行項目が自動的に適切にインデントされるためです。
これを実現するための簡単でエレガントな方法はありますか?このようなマークアップを使用できれば素晴らしいと思います。
つまり、特定のアイコンクラスを再利用しますが、それらをli要素の一部にします。
javascript - フォント (@font-face) が既に読み込まれているかどうかを知る方法は?
Font-Awesome を使用していますが、フォント ファイルが読み込まれていない間、アイコンが で表示されます。
display:none
そのため、ファイルがロードされていない間、これらのアイコンが必要です。
これらのファイルがロードされ、最終的にアイコンを表示できるようになったことをどのように確認できますか?
編集: ページ全体が読み込まれる前にフォントが読み込まれる可能性があるため、ページが読み込まれるとき (onload) については話していません。
css - FontAwesomeアイコンの配置
私はbootstrap-sassとfont-awesome-sass-railsgemを使用しており、bootstrap-and-overrides.css.scssに追加することで、(グリフィコンから)重複するアイコンを正常に根絶しました。
しかし、今はアイコンが少しずれているという問題があります。グリフィコンは以前は完璧でした。今私は見ています:
アイコンを1ピクセルまたは2ピクセル下に移動したいと思います。助けてください。ありがとう。
css - font-size を大きくしても、CSS Web フォントは DIV を展開しませんか?
サムネイルの大きなフォントで私がここに持っているものを見ることができます: http://unlockinglg.com/beta/index.html
ブートストラップでfont-awesomeを使用しています
jquery - フォント素晴らしいアイコンにイベントをバインドする方法は?
click
イベントを素晴らしいフォントアイコンにバインドしたいと思います。ただし、アイコン自体はクリックできません。追加のテキストを挿入した場合にのみ、そのテキストがバインドされます。
アイコン自体をバインドするにはどうすればよいですか?
css - 単一のリスト項目要素で、箇条書きに Font Awesome アイコンを使用する
Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) アイコンを CMS の順序付けられていないリストの箇条書きとして使用できるようにしたいと考えています。
CMS のテキスト エディターは生の HTML のみを出力するため、追加の要素/クラスを追加することはできません。
これは、マークアップが次のような場合にアイコンを表示することを意味します。
Font Awesome が別の font-family 属性を必要とする場合に最初に確認できる問題は、別の要素が必要になることです。
純粋なCSSを使用してこれは可能ですか? それとも、jQuery のようなものを使用して、各リスト項目の先頭に要素を追加する必要がありますか?
背景画像のフォールバックを使用できることはわかっていますが、可能であれば Font Awesome を使用することをお勧めします。
css - アイコン フォント (Font Awesome) を使用すると、少しぼやけて見え、太くなりすぎます
私は Font Awesome を使って自分のサイトでアイコンを作成しています。iPod Touch with Retina ディスプレイでは素晴らしく見えますが、私の iMac では少しぼやけていて、はっきりしていないように見えます。
デモ用の画像を次に示します。
ご覧のとおり、Retina ディスプレイの iPod Touch ではフォントが非常にきれいに鮮明に見えますが、iMac では少々粗末です。
これは何が原因ですか?これはアンチエイリアシングと関係がありますか?これについて何かできることはありますか?
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を表示させるための他のアプローチについて、誰かが何かアイデアを持っていますか?
html - 素晴らしいフォントのテキストグラデーション
すばらしいフォントを見つけたので、自分のウェブサイトで使用したいと思います。
問題は、フォントをグラデーションで色付けしたいということです。標準テキストで動作するこのコードを見つけましたが、Font Awesome のアイコンで動作させることはできません
これが私がテストしたものです:
そして、グラデーション、必要なアイコン、そして何もない「Hello world」が表示されました...
誰でも何か考えがありますか?
ありがとう