ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap から独立して Bootstrap Glyphicon を使用するにはどうすればよいですか?

Bootstrap から独立して Bootstrap Glyphicon を使用するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-03 20:53:03
オリジナル
650 人が閲覧しました

How can I use Bootstrap Glyphicons independently from Bootstrap?

Twitter Bootstrap Glyphicons CDN Returns

最近の統合プル リクエストの後、Bootstrap の有名な Glyphicons アイコン フォントがメイン リポジトリに再統合されました。これにより、アイコンは UI のナビゲーションと理解において重要な役割を果たすため、ユーザー インターフェイス デザインの基本的な要素が復活します。

Bootstrap Glyphicon の CDN URL

Bootstrap 3.0 CDN になりましたGlyphicon を含む完全な Bootstrap 3.0 CSS をホストします。 HTML では、次の参照を使用してグリフィコンを含めることができます:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
ログイン後にコピー

CSS の場合は、次の import ステートメントを使用します:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ログイン後にコピー

グリフィコンを個別に使用する

Bootstrap フレームワーク全体を利用しないプロジェクトの場合、Glyphicon は Bootstrap CDN を通じて個別に参照できます。

HTML 内:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
ログイン後にコピー

CSS 内:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
ログイン後にコピー

追加の考慮事項

Glyphicon をブートストラップとは別に使用する場合は、必要な依存関係がブートストラップ CDN の相対パスに含まれていることを確認してください。さらに、.glyphicon クラスが .icon クラスを置き換えていることに注意してください。

使用例

ハート アイコンを使用するには、.icon-heart を .glyphicon-heart に置き換えます。

<span class="glyphicon glyphicon-heart"></span>
ログイン後にコピー

JavaScript コンポーネントを統合する場合は、bootstrap.min.js を別途含めてください。

以上がBootstrap から独立して Bootstrap Glyphicon を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート