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

Font Awesomeはアイコン的なスタンドアロンのベクターフォントで、最初はTwitter Bootstrapフロントエンドフレームワークで使用するために開発されました。



29
Font awesomeにアイコンが表示されない
私はFont Awesomeを使用していますが、HTTPでCSSを追加したくありません。Font Awesomeをダウンロードしてコードに含めましたが、Font Awesomeはアイコンではなく境界線の付いた四角いボックスを表示しています。これが私のコードです: <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> 四角い枠の代わりにアイコンを表示する方法を教えてください。
99 html  css  font-awesome 

15
Reactのrender()にFont Awesomeアイコンを含める方法
ReactのFont Awesomeアイコンを使おうとすると、render()通常のHTMLでは機能しますが、結果のWebページには表示されません。 render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } これが実際の例です:http : //jsfiddle.net/pLWS3/ 欠点はどこですか?

4
すべてのグリフが同じ幅であることを確認するにはどうすればよいですか?
同じフォントサイズでも標準の幅がないことに気づきました。単語がギザギザに表示されないように、アイテムのリストの前でこれらをどのように使用できますか? 問題のスクリーンショット: これはコードです: <ul id="myTab"> <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li> <li><a href="#video"><i class="icon-film"></i> Videos</a></li> <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li> <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li> <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li> </ul>

6
font-awesomeアイコンを静的に回転
font-awesomeアイコンを静的に45度回転させたいのですが。それはサイトで言う: アイコンを任意に回転および反転するには、fa-rotate- *およびfa-flip- *クラスを使用します。 ただし、 <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> は機能しませんが、で置き換えるfa-rotate-45とfa-rotate-90機能します。これは実際には任意に回転できないことを意味しますか?

8
Font Awesomeアイコンを入力フィールドに追加するにはどうすればよいですか?
Font Awesomeに含まれている検索アイコンを入力に使用するにはどうすればよいですか?私のサイトには(PHPmotionに基づく)検索機能があり、それを検索に使用したいと考えています。 これがコードです: <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color: #ffffff" /> <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" …
89 html  css  font-awesome 

8
FontAwesomeからSVGを抽出する
Font AwesomeグリフからSVGパスデータを取得して、HTMLでSVGとして直接使用できるようにします。fontawesome-webfont.svgからパスデータをコピーして貼り付けるのと同じくらい簡単だと思いましたが、HTMLで使用すると、シンボルがすべて逆さまにレンダリングされます。誰もが理由を知っていますか? (フィドルを参照) Font Awesome SVG: <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 …
89 html  svg  font-awesome 

7
使用するクラスのみに最適なFontAwesome
Font Awesome Sassファイルhttps://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassを使用して_font-awesome.sassにしているので@import、Sassプロジェクトに参加できます。また、http://middlemanapp.com/を使用してSassをに変換していますCssます。質問: 使用済みのアイコンクラスのみを変換された.cssに取り込む方法はありますか?今は_font-awesome.sassのすべてのクラスを運んでいたからです ボーナス:再コンパイルすることは可能ですか?使用済みのアイコンクラスを使用してフォント、本番環境で使用ときにフォントを小さくすることは可能ですか? 上記の#1に関するヒントを得ることができれば、それで十分です。 ありがとう。
86 css  sass  font-awesome 

9
相対パスを使用してWebpackでSCSS(SASS)を使用してfont-awesomeをロードするにはどうすればよいですか?
node_modulesフォルダーにfont-awesomeがあるので、次のようにメインの.scssファイルにインポートしようとします。 @import "../../node_modules/font-awesome/scss/font-awesome.scss"; しかし、Webpackバンドルのコンパイルが失敗し、教えてくれました Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot font-awesome.scssファイルが相対パス '../fonts/'を参照しているためです。 scss \ webpackに別のファイルを@importし、そのファイルのフォルダーをホームフォルダーとして使用して、相対パスが期待どおりに機能するようにするにはどうすればよいですか?

5
iタグのAltまたはtitle属性
私はfont-awesomeを使用し、次のようにフォントを表示します。 <i class="icon-lock"></i> これにより、素敵な小さなロック記号が表示されます。ユーザーがそれが正確に何を意味するのかを知るために、titleやaltなどの属性を追加しようとしましたが、役に立ちませんでした。 <i>画像のaltやリンクのタイトルと同じタスクを実行するタグに使用できる属性はありますか?

3
TwitterBootstrapのFontAwesome vs Glyphicons
私はWeb開発の初心者で、最近Twitter Bootstrapを使い始めました。これは、すでに使用方法を知っているGlyphiconsを使用していることを知っています。しかし、Bootstrap用に構築されていると言っているFontAwesomeにも出くわしました。 2つの違いは何ですか?つまり、一方が他方の代替手段ですか?それとも、別の場所でそれらを使用する必要がありますか?

8
フォント(@ font-face)がすでにロードされているかどうかを知る方法は?
Font-Awesomeを使用していますが、フォントファイルがロードされていない間、アイコンはで表示されます。 したがって、display:noneファイルがロードされていないときにこれらのアイコンを表示したいと思います。 @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } これらのファイルがロードされ、最終的にアイコンを表示できるようになったことをどのように確認できますか? 編集: フォントはページ全体の前にロードされる可能性があるため、ページがロードされるとき(オンロード)は話していません。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.