web-dev-qa-db-ja.com

Bootstrap CSSを使用せずにグリフィコンを含める方法

いくつかの基本的なHTMLおよびCSSを使用するクライアントプロジェクト。しかし、彼らはウェブサイトのメニューのグリフィコンが好きです。だから私はBootstrap CSSでGlyphiconsを含めようとしましたが、他のCSSはBootstrap CSS。

だから質問はばかげているかもしれません、私はbootstrap cssなしでクライアントWebサイトメニューリンクにグリフィコンを含めたいだけです。

それが最初に可能ですか？ Glyphicons freeはBootstrap Packageで利用できることを知っています。

また、他のことは、ページ構造に影響しているため、クライアントがBootstrap CSSを含めることを望まないことです。

Bootstrap cssまたは独自のカスタムcssなしでGlyphiconsを含めることは可能ですか？

助けていただければ幸いです！

htmlcsstwitter-bootstraptwitter-bootstrap-3glyphicons
17
Raja

これは、ブートストラップ全体からグリフィコンのみを使用できるbowerパッケージです。

このgithubリポジトリを確認してください https://github.com/ohpyupi/glyphicons-only-bootstrap

または

bower install glyphicons-only-bootstrap

[〜＃〜] edit [〜＃〜]

これで、NPMを介してパッケージをダウンロードできるようになりました。

npm install glyphicons-only-bootstrap
8
supergentle

私は、bootstrap.cssファイル全体をインストールせずにBootstrapのグリフィコンを動作させようとしましたが、途中で作業が多すぎてあきらめました。代わりに、私は Font Awesome に出会いました。 Bootstrap 3自体がそれを使用します（または使用するために使用されます）。スタンドアロンとして使用されるように設計されているため、非常にシンプルで軽量です。

  1. ダウンロード Font Awesomeパッケージ;

  2. コピーfont-awesome.min.cssをcssフォルダーに、Font Awesomeのfontsフォルダーからすべてのフォントファイルをfontsフォルダーに;

  3. 含む<link rel="stylesheet" href="path/to/css/font-awesome.min.css"> の中に <head>of your HTML;

  4. アイコンライブラリ からアイコンを選択し、Bootstrapのグリフィコンと同じようにアプリに配置します。

15
Arthur Tarasov

これがあります：

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

ただし、帯域幅をいくらか節約したい場合は、次のように、CDNからフォントを直接ロードし、必要なCSSをインライン化できます。

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

デモはこちら （「メデューサの目」と「火の雨」メニュー項目）で例を見ることができます。

11
thdoan

グリフィコンのチートシートに移動[ https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
1
Naved Khan

Bootstrapsでも同じ問題が発生しました。矢印が必要なだけですが、追加すると混乱します。

だから私はFontAwesomeに移行し、美しく働きました！

次のようなCDNを取得することもできます。

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

独自に入手する必要があります！ :)

1
George

はい、このページからダウンロードするだけです： http://glyphicons.com/ （以下の無料オプション）

編集：このスレッドでこれに関する詳細情報： Bootstrap 3 Glyphicons CDN

1
Alejandro Garrido