web-dev-qa-db-ja.com

fontelloフォントを使用するにはどうすればよいですか？

ある情報源によると、これがFontelloフォントの使用方法です。

ニーズにぴったりのカスタムアイコンWebフォントを作成するのは簡単です。まず、好きなアイコンを選択します。次に、グリフコードを更新し（オプション）、ウェブフォントバンドルをダウンロードします。 Fontelloは必要なものをすべて生成してから、このモジュールの構成ページからバンドルをアップロードします！とても簡単です！

はい。それで？ウェブページでアイコンの1つを呼び出すにはどうすればよいですか？

font-facewebfontsfontello
29
Nancy Collier

バンドル内には、「font」フォルダーと「css」フォルダーがあります。

  1. フォントフォルダーをプロジェクトに移動します。プロジェクトは次のようになります。

    /project-root
-- /stylesheets
-- /images
-- /javascripts
--/font 

  2. Fontello cssを含めます。バンドルの「css」フォルダー内には、以下が表示されます。

    [yourfontname] -codes.css 
 [yourfontname] -embedded.css 
 [yourfontname] -ie7-codes.css 
 [yourfontname] -ie7.css 
 [yourfontname] .css

    ほとんどの場合、必要なのは[yourfontname].cssのみです。そのスタイルシートをプロジェクトに含めます。

  3. 内部[yourfontname].cssは、フォントをインポートする@font-faceルールです。フォントへのパスが正しい場所を指していることを確認してください。デフォルトでは、../font/を検索します。

  4. アイコンを使用するには、アイコンにしたい要素にclass="icon-ICON_NAME"を追加します。 [yourfontname].cssの下部にアイコン名のリストが表示されます。

  5. オプション： Fontelloは、アイコンにmargin-right: .2emを付けます。テキストでアイコンを使用することを想定しているためですが、スタンドアロンのアイコンが必要な場合もあります。スタンドアロンアイコンに<i>タグを使用したいので、fontello cssの下部に次のルールを追加します。

    i [class ^ = "icon-"]：before、i [class * = "icon-"]：before {
 margin：0; 
}

    class="icon-ICON_NAME"<i>タグにを配置すると、不要なマージンがなくなります。

85
Ronen Ackerman