問題タブ [font-awesome]

アイコンのサポートには Twitter Bootstrap とFontAwesomeを使用しています。

IIS サーバーの 1 つに展開する場合、MIME サポートを追加する必要があります。

Azure にデプロイするとき、この機能がないように見えるため、フォントの使用方法を認識していないように見えるため、アイコンが表示されません。

css クラスのエイリアスを作成できますか?

私はこの素晴らしいフォントを使用しており、いくつかのアイコン クラスのエイリアス名を作成しようとしています。そのため、.icon-globeとも呼ばれ.globeます。

どうすればそのようなことを達成できますか？

私はそのようなナビゲーション要素を持っています...

Font Awesome を使用してアイコンを生成しています。CSS は次のとおりです。

明らかに、これにより、ホバー時のテキスト (およびアイコン) の色が #444 に変更されます。今私がやりたいことは、それを維持することですが、ホバーするとアイコンが別の色に変わります。(つまり、テキストが #444 に変わり、ホバーするとアイコンが #AE0000 に変わります)

それに取り組む最善の方法がわかりません。(CCS/HTML はまだかなり新しいので、どんな助けも大歓迎です!)

ありがとう！

font-awesome（または他の象徴的なフォント）クラスを利用してカスタム<li>リストスタイルタイプを作成することは可能かどうか疑問に思っていますか？

私は現在、これを行うためにjQueryを使用しています。

<li>ただし、アイコンが実際の箇条書きではなくテキストの一部であると見なされるため、テキストがページ全体に折り返される場合、これは適切にスタイル設定されません。

任意のヒント？

Twitter Bootstrap での Font Awesome の使用について、いくつかの一般的な質問があります。

彼らの Web サイトに記載されている LESS 統合方法を使用しました。

1. 「象徴的な」フォントだと思いました。では、なぜ Twitter Bootstrap で提供されるメイン テキストのフォントが変更されるのでしょうか。この動作を防ぐことはできますか?

2. Twitter ブートストラップで提供される Glyphicon png バージョンと比較すると、特に小さいサイズではアイコンがぼやけて見えます。なんで？

3. 標準ディスプレイと Retina ディスプレイの両方で (Twitter Bootstrap を使用して) アイコンを正しく表示するためのソリューションは何ですか?

ご意見ありがとうございます。

編集：これは私が抱えている問題の例です。

ご覧のとおり、Font Awesome をインストールすると、フォントが異なって見えます。ボタンの形状と感触が失われます。緑と赤のボタンのアイコンは、icon-large を使用してレンダリングされていますが、それでも非常にぼやけて見えます。これに加えて、それがどういうわけか私のデザインを台無しにしたことに気づきました。

text-size: 180px;Twitter Bootstrap Media Objectで Font Awesome アイコン (適用済み) を使用しようとしています。具体的には、メディア オブジェクトの画像を Font Awesome アイコンに置き換えようとしています。

ただし、ページを開くと、アイコンが上に移動し、メディア オブジェクトの上部で切り取られます。

Stack Overflow で検索してみましたが[font-awesome] [twitter-bootstrap] cut off、2 つの結果が返されましたが、どちらも役に立ちませんでした。<i>また、タグ自体と親の両方に負のマージンを設定しようとしましたが<div>、どちらもうまくいきませんでした。

また、JSFiddle を作成しようとしましたが、うまくいかなかったので、私のサイトはhttp://strugee.github.com/textingwhiledriving/spreadtheword.htmlでオンラインになっています。

jqm-icon-pack-2.1.2-fa.css を Web サイトに追加すると、jQuery UI フォントが表示されません。参照を削除すると、表示されます。Visual Studio 2012 を使用して MVC4 モバイル アプリケーションを作成しています。css ファイルを参照する方法は次のとおりです。

最後の参照を削除すると、jQuery アイコンは機能しますが、Font Awesome アイコンは機能しません。参照を並べ替えようとしましたが、うまくいきませんでした。Firebug でページを調べましたが、違いがわかりません。パスも正しいことを確認しました。自分のウェブサイトへのリンクを投稿したいのですが、エクストラネット内にあるためアクセスできません。私が提供できる最善の方法は、入力を type="search" に設定していて、検索アイコンとクリア テキスト アイコンが表示されないことです。どんな助けでも大歓迎です!!

回答: 私は問題を解決しました。うまくいけば、私のようにキーボードで頭を悩ませていた他の人たちの悲しみと何時間も節約できることを願っています! NuGet パッケージ マネージャーを使用して jQuery モバイルを取得すると、icons-18-black.png、icons-18-white.png、icons-36-black.png、icons-36-white.png という名前の画像ファイルが追加されます。注意しないと、Github Web サイトに、Font Awesome に含める必要がある、icons-18-black-pack.png、icons-18-white-pack.png という、わずかに異なる画像ファイルがいくつかあるという事実を見逃す可能性があります。 、icons-36-black-pack.png、およびicons-36-white-pack.png。これらのファイルの名前には「パック」という単語が含まれており、jQuery モバイルに含まれている元のファイルとは少し異なることに注意してください。不足しているファイルに加えて、ajax-loader とは異なる ajax-loader.png ファイルを必ず追加してください。

HTML5とFontAwesomeでウェブページを作ろうとしています。私の問題は次のとおりです。FontAwesomeアイコンを含めると、2回表示され、両方のコピーが互いに積み重なっています（画像を参照） 。

fontawesome.cssを少し変更しましたが、問題を認識した後、ファイルをダウンロードから再度コピーして、すべての変更をリセットしました。問題はまだあります。だから私の.cssの部分は言う：

そして私はそれを見出しに含めます

残念ながら、私は実際には問題を認識していません。

.cssの「：before」を削除して（とにかく何をするのですか？）、「display：」で遊んで、星が少し上空にあるので「vertical-alignment」を追加してみました...何も役に立ちませんでした。

誰かが似たようなものを持っていましたか？この問題はFirefox、Opera、IEで発生します。

よろしく、アンナ

こんにちは、仲間の Web 開発者です。私は SASS の初心者で、Intellij IDEA Ultimate で開発しています。font-awesome.scssファイルをディレクトリからプロジェクトにコピーしましたfontawesome/sassが、主に次のような構造で、IDE からいくつかのエラーが発生しました。

と,の間のセパレーターとしてコロンについてしつこく言い続けます。[class^="icon-"][class*=" icon-"]

しかし、セクションがこのように見える場合

すべてがうまく見えます。

さらに、生成されたファイルには、明らかに有効な CSS 値ではないためfont-awesome.css、明らかなエラーがいくつかあります。text-decoration: inherit;これらはバグである可能性がありますか、それともここで何か問題がありますか?

scssエラーを防ぐには、上記のファイルの構文をどのように変更すればよいですか?

font-awesome.scssプロジェクト全体で SASS を使用することも計画しているので、使用したいと思います。同じようにfontawesomeを使用できればクールです。

これに関する提案はありますか？

ナビゲーション バーのドロップダウンで、リンクにカーソルを合わせると、アイコン (アイコン グループ、アイコン プラス) にも別のアイコン (アイコン フィルター) が表示されます。これは、ブートストラップのダウン メニューでのみ発生します。ソース ファイルに、適用されている「icon-filter」クラスへの参照が見つかりません。

下のリンクのドロップダウンで、間違ったアイコンを表示できます。
http://agile-ocean-8233.herokuapp.com/

Gemfile:

アプリケーション.css.scss

ナビゲーション ドロップダウン

Bootstrap_and_overrides.css.scss