web-dev-qa-db-ja.com

空のボックスとしてレンダリングされるグリフィコン

私はGlyphiconsで優れたTwitter bootstrapライブラリを使用していますが、すべてのアイコンは次のように空の四角形としてレンダリングされます：

enter image description here

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

enter image description here

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

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

フォントが空のボックスとしてレンダリングされる理由は何ですか？ StackOverflowに関する以前の回答はすべて、フォントへの誤ったパスを指していますが、パスは正しいため、ここでは当てはまりません。

csstwitter-bootstrapglyphicons
17
John Dorean

実際には解決策ではありませんが、Bootstrap CDN： http://www.bootstrapcdn.com/

8
John Dorean

私は同じ問題を抱えていて、それを解決することができました！

  • IISでは、woffおよびwoff2のMIMEタイプを次のように設定しました。

    .woff application/x-font-woff
.woff2 application/font-woff2

  • 私のページのCSSでは、bootstrap Glyphiconダウンロードからwoffとwoff2をダウンロードして、フォントをロードしました：

    @font-face {
  font-family: 'Glyphs';
  src:  url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
        url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
}

  • CSSでグリフィコンのクラスを作成し、「グリフ」というタイトルの上記のフォントを使用するように指定しました。

    .glyphicon {
    font-family: 'Glyphs', sans-serif;
}

  • グリフィコンを表示したいところはどこでも、私はglyphiconクラスで指定し、通常はbootstrap glyphiconクラス：

    <span class='glyphicon glyphicon-home'></span>
3
Vlnflt

Fontsフォルダーをcssディレクトリに配置します。
それは次のようになるはずです

css/fonts/**.svg
css/fonts/**.woff
3
Asghar Abbas

これは、両方のクラスを指定していない場合にも発生する可能性があります（つまり、「glyphicon glyphicon-star」の代わりに「glyphicon-star」のみ）

良い：

<i class="glyphicon glyphicon-star">

悪い

<i class="glyphicon">
3
Paul Schroeder

Glyphiconsチームによると、これはWebKitのバグです。

WebKit CSSコンテンツUnicodeバグ？

ただし、Chromeの古いバージョンがこれをレンダリングする理由を理解していません。ここにバージョンを投稿しましたが、モデレーターの1人が私の回答を削除しました。

1
Marcos Antonio Ferreira Doming

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

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

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 AND woofファイルは、CDN URLの相対パスで使用できます。つまり、 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min。 css /../../ fonts/glyphicons-halflings-regular.eothttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/ .. /../fonts/glyphicons-halflings-regular.woff2https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../ fonts/glyphicons-halflings-regular.woffhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons- halflings-regular.ttfhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular。 svg＃glyphicons_halflingsregular

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

今すぐお試しください...

注：そのファイルのライセンスについては知りません（ビジネス用のドキュメントをいくつか読んでください）。 bootstrapこれらのファイルをダウンロードするために提供されている無料のリンクがあるかもしれません...

0
Karthikeyan

以前にすべてを試し、それでも機能しない人のために、私は変更しました

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

に

.glyphicon:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

bootstrap.cssファイル内

0
Jakob Hartman

私も同じ問題を抱えていました。私の場合はMIMEタイプでしたが、私のiisがuiで追加できるようにしていないため、以前はわかりません：

My iis ui

MIMEタイプだとは思わなかったので、他の解決策を試してみました。時間後に戻って、mimeタイプについて調べます。

のような多くのソリューションを使用して、私のweb.configを30回以上編集しました：

<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
        <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

変更されたコード、テストされたグループ、iisでの特性の追加、パスの変更、すべてのインテントは常に正方形のデータを処理した後、何も機能しません。

したがって、コンソールでMIESタイプをiisに追加することについて読むフォーラムで、私は彼らが言ったように追加しようとしました。

adminとしてcmdを開き、テキストを送信しました：

C:\Windows\System32\inetsrv>appcmd.exe set config /section:staticContent
/+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"

どこ：

"C:\Windows\System32\inetsrv" issのルートフォルダです。

そして：

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"ご存知のように、iisはappcmdでmimeをセットアップするコマンドラインです。

結果：

そして、ボイラ！その仕事。

これが誰かに役立つことを願っています。私にとって便利かもしれません。

0
Beli Mon

私にとって、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');
}
0
tic