Cara Menggunakan Font Hebat dengan JSF: Mengapa Ikon Saya Menunjukkan Petak Kosong?

Mengakses Fail Font Hebat Font dalam JSF

Mengintegrasikan Font Awesome dengan JSF memerlukan pertimbangan tentang cara fail CSS merujuk fail fon. Secara lalai, fail CSS Font Awesome menggunakan laluan relatif, yang boleh menyebabkan isu apabila mengakses fail melalui sistem pemetaan sumber JSF.

Punca Petak Fon Kosong

Dalam JSF, teg dengan atribut perpustakaan yang ditentukan menggunakan awalan laluan khas /javax.faces.resource/* untuk mengakses sumber. Apabila fail CSS Font Awesome diakses melalui laluan ini, laluan relatif dalam fail CSS menjadi tidak betul, menyebabkan penyemak imbas gagal mencari fail fon.

Penyelesaian: Laraskan Rujukan Fail CSS

Untuk menangani isu ini, fail CSS Font Awesome mesti diubah suai untuk menggunakan ungkapan EL untuk merujuk fail fon melalui pemetaan #{resource}. Contohnya, coretan kod berikut mengemas kini rujukan fail fon:

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;v=4.3.0");
  ...
}</code>

Ganti semua laluan relatif dengan ungkapan menggunakan pemetaan #{resource}.

Pertimbangan Tambahan

• Mulakan semula pelayan selepas mengedit fail CSS untuk memastikan perubahan berlaku.
• Jika amaran muncul dalam log pelayan mengenai jenis MIME yang hilang untuk fail fon, tambahkan pemetaan MIME yang diperlukan ke web.xml.
• Sebagai alternatif, pasang OmniFaces UnmappedResourceHandler untuk memudahkan proses pengendalian sumber.
• Untuk menggunakan CSS Font Awesome tanpa atribut perpustakaan, rujuk fail terus dalam JSF menggunakan atribut nama :

<code class="html"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" /></code>

Sumber Tambahan

• [Cara menggunakan Font Awesome dari webjars.org dengan JSF](pautan rujukan yang berkaitan)

Atas ialah kandungan terperinci Cara Menggunakan Font Hebat dengan JSF: Mengapa Ikon Saya Menunjukkan Petak Kosong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!