プログラミング font-awesome

11

次のようなCSSがあります。 #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } 画像をFont Awesomeのアイコンに置き換えたいのですが。 CSSのアイコンを背景画像として使用する方法がわかりません。これは、CSSの前にFont Awesomeスタイルシート/フォントがロードされていると想定して実行できますか？

305 css font-awesome

9

CSSコンテンツとしてFont Awesomeアイコンを使用する

Font AwesomeアイコンをCSSコンテンツとして使用したい。 a:before { content: "<i class='fa...'>...</i>"; } でHTMLコードを使用できないことはわかっていますcontent。画像しか残っていないのですか？

279 html css font-awesome

17

Font Awesomeのアイコンの色を変更できますか？

<a>何らかの理由でアイコンをタグで囲む必要があります。 font-awesomeアイコンの色を黒に変更する方法はありますか？それとも<a>タグで囲まれている限り不可能ですか？素晴らしいフォントは画像ではなくフォントであるはずですよね？ <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html css font-awesome

14

大きなフォントの素晴らしいアイコンでテキストを垂直方向に中央揃えする方法は？

font-awesomeアイコンとテキストを備えたブートストラップボタンがあるとします。 <div> <i class='icon icon-2x icon-camera'></i> hello world </div> テキストを垂直方向の中央に表示するにはどうすればよいですか？テキストがアイコンの下端に揃えられました：http : //jsfiddle.net/V7DLm/1/ 編集：私は可能な解決策を持っています：http：//jsfiddle.net/CLdeG/1/しかしそれは少しハックに感じます-追加のpタグを導入し、pull-leftとdisplay：tableを使用します。多分誰かがより簡単な方法を提案することができます。

231 html css font-awesome

30

Font Awesomeが機能せず、アイコンが四角で表示される

だから私はマーケティングページのプロトタイプを作ろうとしていて、Bootstrapと新しいFont Awesomeファイルを使っています。問題は、アイコンを使用しようとすると、ページにレンダリングされるすべてが大きな四角形になることです。ここでは、ファイルをヘッドに含める方法を示します。 <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css">  </head> そして、これがアイコンを使おうとする私の例です： <i class="icon-camera-retro"></i> しかし、すべてが大きな正方形でレンダリングされます。誰かが何が起こっているのか知っていますか？

224 css html twitter-bootstrap font-awesome

7

素晴らしいフォント、入力タイプ「送信」

font-awesomeに入力タイプ 'submit'のクラスがないようです。ボタン入力にfont-awesomeのクラスを使用することは可能ですか？アプリケーションのすべてのボタン（実際にはtwitter-bootstrapの「btn」クラスにリンクしている）にアイコンを追加しましたが、「入力タイプ送信」にアイコンを追加できません。または、このコードの使用方法： input#image-button{ background: #ccc url('icon.png') no-repeat top left; padding-left: 16px; height: 16px; } html： <input type="submit" id="image-button">Text</input> （HTMLから取得：テキストと画像を含む送信ボタンを作成するにはどうすればよいですか？）font-awesomeを使用しますか？

205 twitter-bootstrap twitter-bootstrap-rails font-awesome

7

ロード状態のときにボタンにスピナーアイコンを追加するにはどうすればよいですか？

Twitter Bootstrapのボタンには素晴らしいLoading...状態があります。問題は、次のような属性Loading...を介して渡されたようなメッセージを表示することdata-loading-textです。 <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> Font Awesomeを見ると、アニメーション化されたスピナーアイコンがあることがわかります。次のUploadような操作を実行するときに、そのスピナーアイコンを統合しようとしました。 $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); しかし、これはまったく効果がありませんでしたUploading...。つまり、ボタンのテキストが表示されるだけです。ボタンが読み込み状態のときにアイコンを追加することはできますか？なんとなく、Bootstrap <i class="icon-upload icon-large"></i>はLoading状態のときにボタン内のアイコンを削除するだけのようです。これは、上記で説明した動作を示す簡単なデモです。読み込み状態になると、アイコンが消えます。時間間隔の直後に再表示されます。

190 button twitter-bootstrap icons loading font-awesome

6

font-awesomeアイコン付きのカスタムliリストスタイル

font-awesome（または他のアイコンフォント）クラスを使用してカスタムを作成することが可能かどうか疑問に思っています <li>リストスタイルタイプですか？私は現在、これを行うためにjQueryを使用しています。つまり、 $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); ただし、これは適切にスタイル設定されません <li>アイコンが実際の行頭文字ではなくテキストの一部であると見なされるためテキストがページ全体に回り込む。任意のヒント？

156 css html-lists font-awesome

15

ネイティブAndroidアプリケーションで「フォントオーサム」のアイコンとシンボルを使用する方法

私のアプリケーションでFont Awesomeを使用しようとしています。を使用してフォントを統合することができましたTypeface.createFromAsset()が、このフォントによって提供されるアイコンも使用したいのですが、これまではできませんでした。この特定のフォントには、Unicode Private Use Area（PUA）内に、メディアプレーヤーコントロール、ファイルシステムアクセス、矢印などのアイコンが含まれています。 Androidでアイコンや記号を含むフォントを使用したことはありますか？

153 android font-awesome

8

素晴らしいフォントにカスタムアイコンを追加する

Font Awesomeアイコンフォントが大好きで、サイトのほとんどのアイコンに使用したいのですが、提供されているものに加えて、必要なカスタムsvgアイコンがいくつかあります。 Font Awesomeの.svgバージョンは、主に次の<glyph />要素で構成されていることに気付きました。 ... <glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 …

138 svg webfonts font-awesome

22

テキスト入力要素内の素晴らしいフォントアイコン

ユーザー名入力フィールドにユーザーアイコンを挿入しようとしています。 Font Awesomeはフォントなので、プロパティが機能しないことを知っている同様の質問からの解決策の1つを試しました。background-image 以下は私のアプローチであり、アイコンが表示されません。 .wrapper input[type="text"] { position: relative; } .wrapper input[type="text"]:before { font-family: 'FontAwesome'; position: absolute; top: 0px; left: -5px; content: "\f007"; } デフォルトのフォントawesome cssでフォントフェースを宣言しているため、上記のfont-familyを追加するのが適切な方法であるかどうかは不明でした。 @font-face { font-family: 'FontAwesome'; src: url('../Font/fontawesome-webfont.eot?v=3.2.1'); src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); }

136 html css fonts font-awesome

14

Font Awesomeアイコンを円形にしますか？

私はいくつかのプロジェクトで素晴らしいフォントを使用していますが、素晴らしいフォントアイコンで実行したいことがいくつかあります。次のように簡単にアイコンを呼び出すことができます。 <i class="fa fa-lock"></i> すべてのアイコンを常に境界のある丸い円にすることは可能ですか？このようなもの、私は写真を持っています：使用する i { background-color: white; border-radius: 50%; border: 1x solid grey; padding: 10px; } 効果はありますが、問題はアイコンが常にテキストや要素の横よりも大きいことです。解決策はありますか？

134 css font-awesome

7

箇条書きにFont Awesomeアイコンを使用し、リストアイテム要素を1つにする

Font Awesome（http://fortawesome.github.com/Font-Awesome/）アイコンをCMSの順序なしリストの箇条書きとして使用できるようにしたいと考えています。 CMSのテキストエディターは生のHTMLのみを出力するため、追加の要素/クラスを追加できません。つまり、マークアップが次のようになったときにアイコンを表示します。 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 最初の問題は、Font Awesomeが別のfont-family属性を必要とするかどうかを確認することができます。これは純粋なCSSを使用して可能ですか？または、jQueryのようなものを使用して、各リスト項目の先頭に要素を追加する必要がありますか？背景画像のフォールバックを使用できることは承知していますが、可能であればFont Awesomeを使用することをお勧めします。

131 css font-awesome

23

FontAwesomeアイコンが表示されない。どうして？

最近、私はこのウェブサイトを開発していて、それにフォントの素晴らしいアイコンを入れようとしているので、スケーラブルです。問題は、彼らが現れていないことです。 HTMLを見てください。 <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a> または <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li> 私はスタイルシートのリファレンスを頭に入れました。なぜ表示されないのかわかりません。ここに参照があります： <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> よし、これが完全なhtmlだ。 <head> <meta charset="UTF-8"> <title>Retrica</title> <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="style/normalize.css" rel="stylesheet" type="text/css"> <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css"> </head> <body> <header class="top-header"> <div class="container"><!-- …

123 html css font-awesome

10

node-modulesからfont-awesomeアイコンを使用する方法

を使用してfont-awesome 4.0.3アイコンをインストールしましたnpm install。 node-modulesから使用する必要がある場合、htmlファイルでどのように使用すればよいですか？ lessファイルを編集する必要がある場合、node-modulesで編集する必要がありますか？

111 css node.js less npm font-awesome

タグ付けされた質問 「font-awesome」

タグ付けされた質問「font-awesome」