17

私は Glyphicons で優れた Twitter ブートストラップ ライブラリを使用していますが、次のようにすべてのアイコンが空の正方形としてレンダリングされています。

ここに画像の説明を入力

Glyphicons フォントを Web ルートにアップロードbootstrap.cssし、正しい場所を指すようにファイルを変更しました。これ200 OKは、Chrome の開発ツールで要求があるため、確認済みです。

ここに画像の説明を入力

これは私が使用しているマークアップです:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

フォントが空のボックスとしてレンダリングされる理由はありますか? StackOverflow に関する以前の回答はすべて、フォントへのパスが正しくないことを示していますが、パスが正しいため、ここではそうではありません。

4

14 に答える 14

3

fonts フォルダーを css ディレクトリ
に配置します。次のようになります。

css/fonts/**.svg
css/fonts/**.woff
于 2016-06-16T22:32:43.783 に答える
0

以下の css スタンザは Glyphicons Halflings のフォント ファミリを定義します //bootstrap.css 内

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

CDN を使用している場合、必要な EOT および woof ファイルは、CDN URL の相対パスで利用できます。つまり、 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/.. /../fonts/glyphicons-halflings-regular.eot https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular .woff2 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff https://maxcdn.bootstrapcdn.com /bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.ttf https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap. min.css/../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

したがって、ローカル マシンの bootstrap.css ファイルで Glyphicons を使用する場合は、上記のリンクからすべてのファイルをダウンロードし、同じ相対パスに配置します。つまり、../fonts/

そして今すぐ試してください...

注: そのファイルのライセンスについては知りません (業務用のドキュメントを読んでください)。これらのファイルをダウンロードするためにブートストラップによって提供される無料のリンクがあるかもしれません...

于 2015-06-11T13:30:31.090 に答える
0

私にとっては、sassバージョン_glyphicons.scssのセクションであることに気付きました：

@at-root {
  // Import the fonts
  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot #iefix')) format('embedded-opentype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
  }
}

以前の状態に置き換える必要がありました:

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
于 2015-11-10T23:33:00.970 に答える
0

私にとっては、このマークアップが機能します...異なるのはアイコンクラスの定義だけです:

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>
于 2013-10-01T23:43:05.653 に答える