ブートストラップ コンポーネント Glyphicons フォント icon_html/css_WEB-ITnose

Glyphicon フォント アイコン

利用可能なすべてのアイコン

Glyphicon Halflings の 250 以上のフォント アイコンが含まれています。グリフィコン ハーフリングは通常有料ですが、その作成者は Bootstrap に無料で使用することを許可しています

いくつかのアイコンを見てみましょう

使用されるメソッドも非常に簡単です

パフォーマンス上の理由から、すべてのアイコンには基本クラスが必要です各アイコンに対応するクラス。次のコードを入力すると、どこでも正常に動作します。正しいパディングを設定するには、アイコンとテキストの間に必ずスペースを追加してください。

他のコンポーネントと混合しないでください。

Icon クラスを他のコンポーネントと直接組み合わせて使用​​することはできません。同じ要素上の他のクラスと共存することはできません。ネストされた タグを作成し、この タグにアイコン クラスを適用する必要があります。

空のコンテンツを持つ要素にのみ機能します

Icon クラスは、テキスト コンテンツや子要素を含まない要素にのみ適用できます。

アイコン フォント ファイルの場所を変更する

ブートストラップは、すべてのアイコン フォント ファイルが、プリコンパイルされた CSS ファイルのディレクトリに対して相対的な ../fonts/ ディレクトリにあると想定します。アイコン フォント ファイルの場所を変更する場合は、以下にリストされているいずれかの方法で CSS ファイルを更新する必要があります:

Less ソース ファイル名の @icon-font-path および/または @icon-font- を変更します。変数。

Less コンパイラが提供する相対 URL アドレス オプションを使用します。

プリコンパイルされた CSS ファイルの url() アドレスを変更します。

自分の状況に基づいて方法を選択してください。

アイコンのアクセシビリティ

最新の支援技術は、CSS で生成されたコンテンツと特定の Unicode 文字を認識して読み上げることができます。画面読み取りデバイスが意図せず混乱を招く可能性のある出力を取得しないようにするために (特にアイコンが純粋に装飾的な場合)、これらのアイコンに aria-hidden="true" 属性を設定します。

アイコンを使用して何かを表現する場合 (装飾のためだけでなく)、表現したい意味が補助デバイスで認識できることを確認してください。たとえば、追加のコンテンツを含めて .sr 専用クラスを介して表現します。隠れた効果。

作成するコンポーネントにテキスト コンテンツが含まれていない場合 (たとえば、<ボタン> にアイコンのみが含まれている場合)、補助デバイスを使用しているユーザーがそのコントロールの内容を理解できるように、コントロールの意図を表現する他のコンテンツを提供する必要があります。関数。この場合、コントロールに aria-label 属性を追加できます。

<span class="图标的类" aria-hidden="true"></span>，图标的类就是图标下面的英文字母

还有如果想让图标变成其他颜色的话，自己写个css样式就好

アイコンを使用するときに遭遇した問題: アイコンを使用しましたが、ブラウザのデバッグ ウィンドウでエラーが発生しました。基本的に、フォント ディレクトリにはそのようなアイコンはありませんでしたが、フォント ディレクトリは Web サイトからダウンロードされました。変化はなく、アイコンは正常に表示され、何も問題はありませんが、アイコンの読み込みが非常に遅い場合や、表示できない場合があります。原因を知っている方がいらっしゃいましたら、教えてください。