web-dev-qa-db-ja.com

ブートストラップ3グリフィコンズCDN

注意を払う！

Bootstrapアイコンは、の後 このプル要求のマージ の後ろにあります。

ここ数週間の間にこれを行ったり来たりした後、私は Glyphiconsアイコンフォントをメインリポジトリに戻すことにしました。アイコンがUIにどの程度普及しているかを考えると、CSS（および他のアイコンフォント）をCSSやJSと同じ場所に含めないことは、たいていの人にとってはおそらく不愉快なことです。

このアップデートにより、以下のことが起こります。

  • ドキュメントを復元します（[コンポーネント]ページ）。
  • アイコンフォントの追加と削除を柔軟に行うための新しい変数@icon-font-pathと@icon-font-name
  • 最新のGlyphiconsへのアップグレード（40個の新しいアイコンを追加）
  • CSSページから古いGly​​phiconsの言及を削除します

フォントライブラリの交換がより簡単になるように、将来的にアイコンフォントのカスタマイズの改善に取り組んでいきます（これが元々の削除の動機でした）。

Twitter Bootstrap Glyphiconsの新バージョンのCDN URLはどれですか。

Bootstrap 3から それらは別のリポジトリに移動されました しかし、私はCDNを見つけられませんでした。

公式文書より：

Bootstrap 3の起動により、アイコンは別のリポジトリに移動されました。これは主要プロジェクトを可能な限りスリムに保ち、人々がアイコンライブラリを交換するのをより簡単にし、そしてGlyphiconsアイコンフォントをBootstrap以外のより多くの人々がより容易に利用できるようにします。

公式ウェブサイト 彼らはアイコンのCDN URLを提供していません。

どこでそれを見つけることができますか？リポジトリをダウンロードして自分のプロジェクトに含めたくありません。

htmlcsstwitter-bootstrapcdntwitter-bootstrap-3
79
Ionică Bizău

最近の ブートストラップ3のリリース と、グリフコンがメインのBootstrapリポジトリにマージされ、 Bootstrap CDN が完成しました。 Glyphiconsを含むブートストラップ3.0 CSS。 Bootstrap cssの参照はあなたが含める必要があるすべてです：グリフィコンとその依存関係はCDNサイトの相対パス上にあり、bootstrap.min.cssで参照されます。

HTMLでは：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

CSSで：

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

これが実用的なデモです。

.glyphiconの代わりに.iconクラスを使用する必要があることに注意してください：

例：

<span class="glyphicon glyphicon-heart"></span>

また、Bootstrap JavaScriptコンポーネントを使用するにはbootstrap.min.jsを含める必要があることにも注意してください。urlについては Bootstrap CDN を参照してください。

Glyphiconsを個別に使用する場合、 Bootstrap CDN のGlyphicons cssを直接参照することでそれを実行できます。

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");

cssファイルには（Bootstrap CDNサイトの相対パスにある）必要なすべてのGlyphicons依存関係がすでに含まれているので、cssファイルを追加するだけでGlyphiconsの使用を開始できます。

これは、ブートストラップのないGlyphiconsの実用的な デモ です。

135
edsioufi

別の方法は、アイコンに Font-Awesome を使用することです。

素晴らしいフォントを含む

--- CDNJSではFont-Awesome を開き、最新バージョンのCSS URLをコピーします。

<link rel="stylesheet" href="<url>">

またはCSSで

@import url("<url>");

例えば（注意、バージョンは変わるでしょう）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

使用法：

<i class="fa fa-bed"></i>

それは含まれています たくさんのアイコン ！

27
Ionică Bizău

Bootstrap CDNはグリフアイコンをbootstrap.min.cssに復元しましたが、Bootstrap CDNのBootswatch cssファイルにはグリフアイコンは含まれていません。

例えばアメリアのテーマ： http://bootswatch.com/amelia/

このファイルには、デフォルトのAmeliaのグリフアイコンがあります。 http://bootswatch.com/amelia/bootstrap.min.css

しかし、Bootstrap CDNのcssファイルにはグリフォンは含まれていません。 http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

@edsioufiが述べたように、ブートストラップCDNのBootswatchファイルを使用する場合は、glphicons cssを含める必要があります。ファイル： http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

2
trante