アイコンフォント：素晴らしいフォントの長所と短所

アイコンフォントは、Webサイトのコンテンツに特定の標準アイコンを含めるために使用されます。 NS フォント 'Awesome' これらの特に良い例であり、他のアイコンフォントに比べて多くの利点があります。 もともとによって設計された デイブ・ギャンディ 使用のために Twitterのブートストラップ、Font Awesomeは、WordPressで使用できます。 Font AwesomeIconsプラグイン によって設計された レイチェルベイカー.

ここでは、そのようなフォントの簡単な紹介と、Awesomeフォントがまだ初期段階にある可能性のあるスタイルに適合する場所を示します。

アイコンフォントを使用する理由

あなたがウェブサイトをデザインするとき、画像はそれらのファイルサイズのために多くのウェブスペースを占有します。 また、HTMLマークアップを使用してWebページに呼び出す必要があります。 それだけでなく、スケーリングがしばしば問題になり、サイズが大きくなると定義が失われます。 通常の画像は、元の設計寸法で使用された場合にのみ意図したとおりに解決されます。

車両、特定の句読文字、グラフィックチャートアイコンなどの標準のアイコン画像を探している場合、アイコンフォントは、フォントのサイズに関係なく同じように見えるスケーラブルな画像を提供できます。 これは、サイズ2または5、または10または24ポイントのフォントサイズを使用するかどうかに関係なく、文字と数字が同じように表示されるのと同じです。

多くの場合、人々はこの問題のために単に画像を使用せず、彼らの記事やオンラインレポートはそれのために詳細または明快さに苦しんでいます。 Font Awesomeを使用することで、サイトに基本的なアイコンを追加し、必要なサイズに拡大縮小できます。ドキュメントのサイズによってのみ制限されます。定義を失うことなく、そうすることができます。 スケーラブルフォント文字と同じ方法でスケーラブルアイコンを見ることができます。

利用可能なビデオプレーヤーとソーシャルアイコンの選択は次のとおりです。

また、バージョン3.0に付属する新しいアイコン：

これらのそれぞれは、定義を失うことなくサイズを大きくすることができます。 色を変更したり、影を簡単に追加したり、透明度を変更したりできます。 実際、ファイルサイズの不利な点なしに、画像でできること、そしていくつかのことをそれらで行うことができます。

それは基本的にアイコンフォント、特にAwesomeフォントができることです。 これらの使用方法とそれらを最大限に活用する方法に関するいくつかの情報と、アイコンの前面に関連するXNUMXつまたはXNUMXつの欠点を次に示します。

FontAwesomeの使用

通常のブートストラップCSSの場合：

Font Awesomeは、Awesomeフォントディレクトリをプロジェクトにコピーしてから、font-awesome.min.cssをプロジェクトにコピーすることにより、デフォルトのBootstrapCSSで使用できます。 次に、font-awesome.min.cssを開き、フォントパスを編集して、Awesomeの場所を指すようにする必要があります。

HTMLのHeadセクションでは、font-awesome.min.cssの場所を次のように参照する必要があります。

CSSディレクトリからの相対的なフォントパス。

ブートストラップレスの場合：

LESSCSSでTwitterBootstrapを使用している場合は、最初にFont Awesomeフォントディレクトリをプロジェクトにコピーし、font-awesome-lessをBootstrapLessディレクトリにコピーします。 それで：

• a）bootstrap.lessを開き、@ import“ sprites.less”を置き換えます。 @import“ font-awesome.less”で;
• b）プロジェクトのfont-awesome.lessを開き、@ FontAwesomePath変数を編集してフォントディレクトリを指すようにします。

@FontAwesomePath： "../font";

コンパイルされたCSSディレクトリからの相対的なフォントパス。

これですべての設定が完了しました。ただし、静的コンパイラを使用している場合は、LESSを再コンパイルする必要があります。

ブートストラップを使用しない：

Bootstrapを使用していない場合は、フォントファイルをプロジェクトディレクトリにコピーした後、XNUMXつのfont-awesomeファイルのいずれかをプロジェクトにコピーして開き、フォントの場所を編集してフォントディレクトリを指すようにします。

Internet Explorer 7を使用している場合は、font-awesome-ie7.min.cssを使用してください

WordPressで素晴らしいFontを使用する方法

プラグイン*をアップロードしたWordPressでアイコンフォントを使用する簡単な方法はXNUMXつあります。 HTMLを使用してそれらを埋め込むか、ショートコードを使用できます。 それぞれの例を次に示します。

HTMLの使用： フォントを表示する場所で、アイテムの名前をクラス名に追加するだけです。[html] [/ html]
黒丸を追加します。

したがって、円のサイズを変更できます。

同じサイズのアイコンを頻繁に使用し、例外については上記の形式を使用する場合は、CSSスタイルシートにフォントサイズを追加する方が簡単な場合があります。

ショートコードの使用： ショートコードの方が簡単ですが、通常は投稿エディタ画面の投稿とページのコンテンツに対してのみ機能します。 形式は、円が必要な場所の[icon name = icon-circle]です。

アイコンフォントの欠点

アイコンフォントは、ブログやWebサイトに特定のアイコンを追加する必要がある場合に便利で、リンクして特定の機能を実行できます。 ただし、すべてが完璧というわけではなく、アイコンフォントにも欠点があります。 これらは、Font Awesomeに適用されないアイコンフォントのユーザーによって報告される一般的な問題です。そのため、「Awesome！」

1. XNUMXつは、アイコンをアルファベット文字として読み上げる可能性のあるスクリーンリーダーの潜在的な問題です。 フォント文字の取得方法が原因で、これはFontAwesomeの問題ではありません。
2. それらは、単一の色でのみ、またはCSS3グラデーションを使用したカラーグラデーションで表示できます。 それはアイコンフォントの本当の問題ですか？
3. ニーズに合わせてカスタムフォントを作成するには時間がかかる場合があります。 ただし、Font Awesomeが提供するすばらしいフォントはすでに多数あり、リストは継続的に拡張されています。 無料のクローズドソースフォントですが、ユーザーがデザインしたプロプライエタリフォントが定期的に追加されています。

Font AwesomeGeneratorの概要

Font Awesomeジェネレーターは、現在入手可能な最高の無料アイコンフォントのXNUMXつです。 Twitter Bootstrapで使用するように設計されていますが、通常のWebサイトでの使用に適合させることができ、このアイコンフォントの最高のものを提供するWordPressプラグインも利用できます。 アイコンフォントを使用している場合は、一度習得すると驚くかもしれないので、FontAwesomeを試してみてください。

* Font Awesome Icons WordPressプラグインは、https：//github.com/rachelbaker/から入手できます。