• グローバル・ナビゲーションへスキップ
  • メインコンテンツへスキップ
  • フッターへスキップ
TechLila ロゴ

テクリラ

ブリーディングエッジ、常に

  • ホーム
  • ブログ
    • Android
    • パソコン
    • インターネット
    • iPhone
    • Linux
    • テクノロジー
    • Windows
  • MECOについて
  • お問い合わせ
  • お得な情報とオファー
テクリラ ロゴ
FacebookツイートするLinkedInピン株式59
HTML5ゲームエンジン
次に

HTML5開発エンジンを使用して独自のHTML5ゲームを作成する

Font Awesome アイコニック フォント Exa

テクリラ ウェブデザインと開発

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

ラジェッシュ・ナマセのアバター ラジェッシュナマセ
最終更新日: 14年2023月XNUMX日

アイコンフォントは、Webサイトのコンテンツに特定の標準アイコンを含めるために使用されます。 NS フォント 'Awesome' は、他のアイコン フォントよりも多くの利点を提供する良い例です。 使用することもお勧めします アイコンフォント 良い代替手段としてFreepikから。

Font Awesome はもともと デイブ・ギャンディ 使用のために Twitterのブートストラップ. Font Awesome は、WordPress で使用できます。 Font AwesomeIconsプラグイン によって設計された レイチェルベイカー.

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

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

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

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

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

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

FontAwesomeの象徴的なフォントの例

また、バージョン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/から入手できます。

情報開示: TechLila で公開されたコンテンツは読者サポートです。 アフィリエイト リンクを通じて行われた購入に対して、追加費用なしでコミッションを受け取る場合があります。 私たちを読む 免責事項ページ 私たちの資金調達、編集方針、および私たちをサポートする方法についての詳細を知るために。

共有は思いやりです

FacebookツイートするLinkedInピン株式59
ラジェッシュ・ナマセのアバター

ラジェッシュナマセ

ラジェッシュナマセ はプロのブロガーであり、TechLilaブログの創設者です。 また、彼は情熱的な起業家、インターネットマーケター、そしてフィットネスフリークです。

カテゴリー

  • ウェブデザインと開発

タグ

恐ろしいフォント

リーダーの相互作用

人々が言っ​​ていること

  1. ヴィヴェク・ナス・R

    私のブログでは、Wp ExclusiveIconフォントプラグインを使用しています http://wordpress.org/extend/plugins/wp-elusive-iconfont/
    利点は、色、サイズ、向きなどの変更など、より多くのカスタマイズオプションがあり、他にも多くのアイコンがあることです。 確認してください。

    返信
    • ラジェッシュナマセ

      このWordPressプラグインを読者と共有してくれたVivekに感謝します。

      返信
    • ジェームズ・ドリーセン

      ちょっとVivek、プラグインを共有してくれてありがとう、私はこのようなものを探しています。 また、Font Awesome Iconsを試して、どれが自分に適しているかを確認します。 素敵な記事ラジェッシュ、それを続けてください! よろしくお願いします。

      返信
      • ラジェッシュナマセ

        また、Font AwesomeWordPressプラグインを使用してみてください:)

        返信
  2. アンディー

    こんにちは、私はこれらすべてのクラスを作成してスタイルと画像をテーマに追加するのが面倒なので、このようなものを探していました。 ありがとうございました!!

    返信
  3. ヴィピン

    VivekとRajeshの両方に感謝し、両方とも私が探していた情報を提供してくれました。

    返信
  4. ロヒト・チョーガレ

    こんにちはラジェッシュ

    'はいの場合、オンラインでphpでビデオを再生できるかどうかを教えてください。

    返信
    • ラジェッシュナマセ

      HTML5ビデオタグを使用してみることができます:)そしてPHPでHTML5を使用するのは簡単です:)

      返信
  5. バイバブ

    私はこのプラグインを私のワードプレスアカウントに防御的に追加します。
    管理者に感謝します。

    返信
  6. アナンド・ヒッティナリ

    まあ、私は多くの言葉の男ではないので、このプラグインは私にとって本当に役に立ちます。 このプラグインを共有していただきありがとうございます。

    返信
  7. リリー

    このようなもののためのプラグインはありますか? 初めて聞いたときはすごい。 これを共有していただきありがとうございます。

    返信
  8. モーシンアリ

    非常に興味深いプラグインRajeshは、これらのユニークなアイデアをどこから得たのですか。

    返信
  9. デビッド・クロフト

    こんにちは、
    この「アイコンフォント」トピックは私にとって非常に新しいので、この素敵なブログに感謝します。あなたのブログ内で多くの新しいことや新しい単語を知ることができます。
    フォントジェネレーターは、現在入手可能な最高の無料アイコンフォントです。 とても便利です。

    返信
  10. David Johnson

    参考までに、「Font Awesomeジェネレーター」という用語を使用しましたが、記事ではFont Awesome自体について説明しており、ジェネレーターについては説明していません。 「ジェネレータ」という言葉は、アイコンフォントのコンテキストで特定の意味を持っています。 Font Awesomeをサポートするアイコンフォントジェネレーターの例には、icnfntとFontelloが含まれます。

    返信
    • ラジェッシュナマセ

      さて、記事のタイトルを更新しました。ありがとうございます。

      返信
  11. カールトン

    アイコンフォントのXNUMXつの重要な欠点を省略しました。それは、アイコンフォントが適切に劣化しないことです。 フォントのダウンロードが無効になっているすべてのユーザー(セキュリティを意識している、セキュリティを意識して忘れていた、またはセキュリティを意識して知らない他の誰かによって構成されたため)は、醜い空のグリフ記号を見るだけです。 責任あるアイコンフォントユーザーになるには、それらのユーザーをバスの下に投げることを受け入れる必要があります。

    返信
  12. アユッシュアグラワル

    この記事は少し古いようですが、font awesomeを使用する良い方法は、そのcdnを使用することです://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css 。
    読み込み時間を短縮しようとしているブロガーを支援します。

    返信
  13. ヴィカス

    素敵な投稿です。FontAwesomeは、デザインの世界で最高の開発のXNUMXつです。

    返信
  14. マーク・フォックス

    共有していただきありがとうございます。 今はもっと使いたくなっています。

    返信
  15. ガウラフ・ダット

    おとこ! 2013年、どうしてこれまで見たことがなかったのに、完璧に機能したのでしょうか。 これをありがとう。

    返信

コメントを追加 返信をキャンセル

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

フッターロゴ フッターテキストのロゴ

フッター

MECOについて

こんにちは。TechLilaへようこそ。TechLilaは、基本をマスターするための豊富な記事を見つけることができる有名なテクノロジーブログです。

TechLilaの主な目標は、品質のヒントやコツ、チュートリアル、Windows、Macintosh、Linux、Android、iPhone、セキュリティに関するハウツーガイド、レビューなどのその他のサブトピックなど、独自の情報を提供することです。

リンク

  • MECOについて
  • お問い合わせ
  • 免責事項
  • プライバシーポリシー
  • ご利用規約

続きます

GenesisFrameworkを使用したカスタムテーマ

Cloudwaysによるクラウドホスティング

言語設定

©著作権2012–2023 テクリラ。すべての内容は著作権を有します。