web-dev-qa-db-ja.com

すべてのグリフィコンをBootstrap 3に追加します

Bootstrap 3でGlyphiconsを掘り下げていますが、すべてが揃っているわけではないようです！建物のアイコンを使用したいのですが、グーグルはあまり現れていません何の。

不足しているグリフィコンをBootstrap 3に追加する方法を知っている人はいますか？

twitter-bootstrap-3glyphicons
20
lowe0292

無料サービスを使用して、独自のカスタムフォントを作成できます。 http://fontello.com/

glyphicons-halflings-regular.svgファイルを入力し、使用するアイコンを選択し、必要なフォントのみを含むカスタムフォントをダウンロードします。

Fontelloには、次のライブラリがプリロードされています。

  • フォンテリコ
  • 素晴らしいフォント
  • エンタイポ
  • タイピコン
  • 象徴的な
  • 現代の絵文字
  • メテオコン
  • MFG Labs
  • マキ
  • ゾーシャル
  • ブランディコ
  • とらえどころのない
  • ラインコン
  • Webシンボル

http://glyphicons.com/ でフルバージョンのGlyphiconsを59ドルで購入することもできます。

19
Mike Causer

購入したGlyphicons Proを使用したかったのですが、現在のハーフリングを拡張することはbootstrapが面倒でした。したがって、アイコンセット（フル、ファイルタイプ、ソーシャル）ごとに個別のcssファイルを作成し、コピーされた方法bootstrap=それらを初期化して、同様の構文を使用できるようにします。すなわち.

<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>

この方法では、必要なものだけを読み込むことができ、必要なときにVanilla bootstrap config。を使用できます。ここで私のファイルを見つけてください： Gist @ GitHub

13
Jelby-John

http://glyphicons.com/ からGylphiconsの完全なセットを購入し、利用可能なすべてのアイコンを使用したいと考えました。使用量が少ない場合は、知らない別のことをする必要があります。

このスレッドや他のスタックエクスチェンジネットワークから投稿されたさまざまなことを試した後、私がやったことは次のとおりです。

（1）オリジナルのbootstrap.cssファイルをバックアップしました（私のものを変更しましたが、良い考えです）

（2）/ web/html_css/fontsディレクトリからすべてのglyphicons-regularフォントファイルをmy bootstrapフォントファイルが置かれているフォントディレクトリにコピーしました

（3）bootstrap.cssの263ish行目から開始すると、次のように変更が反映されます：（多少異なる場合があります）

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-regular.eot');
  src: url('../fonts/glyphicons-regular.eot?#iefix') 
  format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') 
  format('woff'), url('../fonts/glyphicons-regular.ttf') 
  format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}

これらのURLは、新しいフォントファイルを指すようにする必要があります。

（4）私のようにすべてのグリフが必要な場合は、/ web/html_css/css /ディレクトリ内のglyphicons.cssというラベルのファイルを開き、@ font-face {}の部分を除くグリヒコンのすべてのcssをコピーします.glyphicon {}を空のテキストドキュメントに貼り付けます。

（5）.glyphiconsの検索と置換（とにかく行った）を行う必要があります。最後に（s）を置き、最後に.glyphicon no（s）に置き換えます。

（6）次に、bootstrap.cssファイルを開き、他のすべての.glyphicon-whateverスタイルをコメント化または削除して、新しいスタイルに貼り付けます。

（7）bootstrap.css.mapファイルを指すファイルの一番下から行を削除する必要がある場合があります。する必要はありませんでしたが、必要になるかもしれません。

（8）ハッピーグリフ！

[〜＃〜] note [〜＃〜]すべてのグリピコンを使用するように設定する必要があります。グリフィコンの名前の一部は、元のbootstrap=ファイルとは異なることに注意してください。

変更したcssファイルのリポジトリを作成しました： https://github.com/snowballrandom/bootstrap

0
Kyle Coots