4

ブートストラップ アプリケーションで Font Awesome フォントを使用したいと考えています。これはレガシー アプリケーションであり、顧客は新しいアイコンを望んでいません。現在のアイコンはブートストラップ グリフです。Font Awesome のアイコンは非常に似ていますが、同じではありません。大したことないよね？フォントファミリを使用して Font Awesome を使用し、必要なアイコンに適切なフォントを配置することはできませんか?

プロジェクトに Font Awesome の「fonts」ディレクトリがあります。4 つのファイルが含まれています。

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.tff
fontawesome-webfont.woff

これを機能させるには、どの css を追加する必要がありますか?

私のhtmlマークアップはどのように見えるべきですか? 次のような例を見てきました。

<g><text x="0" y="0">&#xf040</text></g>

しかし、私がそれを行うと、うまくいきません。私はいくつかのステップが欠けていることを知っています。何か案は？

4

3 に答える 3

8

font-awesome.css ファイルのすべての「icon-」を「fw-icon-」に置き換えました。次に、すべてのブートストラップ アイコンは同じままで、FontAwesome アイコンまたはクラスを使用する必要がある場合は、前に「fw-」を使用するだけです。

例：

<i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>

編集：

本日、Font Awesome 4.0 がリリースされ、すべてのクラスが Bootstrap のアイコン パターンとは異なります。

<i class="fa fa-camera-retro"></i> fa-camera-retro

ここで見ることができます: http://fontawesome.io/examples/

于 2013-05-14T13:22:13.353 に答える
0

Font Awesome が定義する CSS クラスの名前を変更するまで、これは不可能だと思います。Font Awesome は、Bootstrap のアイコンを置き換えることを意図しているため、icon-*クラスを再定義します。

于 2013-02-21T13:38:23.097 に答える
-1

重要* glyphicons と fontawesome の両方を使用するには、同じ名前のアイコンを無効にする必要があります。icon-screenshotfontawesomeで無効にするよりもGlyphicons を使用したいとします。
fontawesome から使用したいアイコンは、 glyphicons で無効にします。最初のステップは、bootstrap.css ファイルの後に fontawesome css ファイルを head セクションに含めることです。例:

icon-filefontawesomeから使用したい場合は 、 bootstrap.css で無効にするだけです。このように
/* icon-file { background-position: -24px -24px; } */

<head>
 <link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

</head>

Jsfiddle を見るJsfiddle with font awesome

fontawesome アイコン付きのシンプルなボタン:-

<a class="btn" href="#">
<i class="icon-repeat"></i> Repeat</a>

素晴らしいフォントのナビゲーションピル:-

<ul class="nav nav-pills">
     <li class="active"><a href="#"><i class="icon-file"></i> New File</a></li>
     <li><a href="#"><i class="icon-cut"></i> Cut</a></li>
     <li><a href="#"><i class="icon-edit"></i> Edit</a></li>
     <li><a href="#"><i class="icon-paste"></i> Settings</a></li>
</ul>

終了 i タグとその後に入力する単語の間にスペースを挿入します。

于 2013-02-21T01:41:24.833 に答える