4

jsf、primefaces、bootstrap 3 でアプリケーションを開発しています。

glyphicons のテスト ページはブラウザに完全に表示されますが、Web プロジェクトでアイコンを使用しようとすると、奇妙なシンボルしか表示されません。

私の最善の推測は、プロジェクトにもフォントをコピーし、相対パスを同じにしたにもかかわらず、glyphicons css ファイルがフォントを見つけることができないということです。

    -resources
     -css
      -bootstrap.css
      -bootstrap-glyphicons.css
     -fonts
      -glyphicons-halflings.eot
      -glyphicons-halflings.otf
      -glyphicons-halflings.svg
       ...

css ファイルが自分のフォント ディレクトリを見つけていることを確認するにはどうすればよいですか / このエラーを修正しますか?

4

6 に答える 6

5

内部でbootstrap-glyphicons.css次の文字列を置き換えます。

  • src:url('../fonts/glyphiconshalflings-regular.eot')
    に
    #{resource['fonts:glyphiconshalflings-regular.eot]}
  • src:url('../fonts/glyphiconshalflings-regular.eot?#iefix')
    に
    #{resource['fonts:glyphiconshalflings-regular.eot?#iefix]}
  • src:url('../fonts/glyphiconshalflings-regular.woff')
    に
    #{resource['fonts:glyphiconshalflings-regular.woff]}
  • src:url('../fonts/glyphiconshalflings-regular.ttf')
    に
    #{resource['fonts:glyphiconshalflings-regular.ttf]}
  • src:url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular')
    に
    #{resource['fonts:glyphiconshalflings-regular.svg#glyphicons_halflingsregular]}
于 2013-08-01T17:55:58.743 に答える
1

ここを見てください。Omnifaces はすでにそれを解決してくれました :)

オムニフェイス UnmappedResourceHandler

ここでは、サードパーティのリソースを変更する必要はまったくありません。

次に、次のようになります。 

<h:head>
  <h:outputStylesheet name="glyphicons/web/html_css/css/glyphicons.css"/>
</h:head>

于 2016-05-04T11:01:27.377 に答える
0

私にとって最も簡単な解決策は、ブートフェイスを使用し、少なくとも 1 つのブートフェイスの要素をページに実装することでした。次に、bootsfaces ライブラリへのすべての参照が問題なくロードされました。ブートストラップと組み合わせたprimefacesでレイアウトとjavascriptの問題が多すぎたため、すべてのprimefaces要素をプレーンなjsfとbootsfaces、およびrichfacesのいくつかの要素に置き換えました。確かにこれはすべてのニーズに対する解決策ではありませんが、ブートストラップに関する知識があまりなく、css/js/html に費やす時間もあまりないため、多くの時間を節約できました。

言うまでもなく、ブートストラップとシームレスに連携するフレームワークがますます増えています。

于 2017-01-12T13:42:03.017 に答える
0 
@font-face{
    font-family:'Glyphicons Halflings';

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}");

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg')
}
于 2014-10-21T23:51:36.907 に答える
0

Html ページ:

  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.eot"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.svg"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.ttf"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff2"></h:outputStylesheet>

CSS の場合 (別の .css ファイルで @font-face をオーバーライドできます。bootstrap.css には触れないでください):

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}");
  src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'), 
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), 
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular") format('svg');
}

一般的な使用:

#{resource['<resource name>']}

また

#{resource['<library name>:<resource name>']}
于 2016-02-12T04:15:40.790 に答える