Bagaimana untuk Membenamkan Ikon Hebat Font dalam Imej SVG?

Cara Menggabungkan Ikon Font Hebat ke dalam Imej SVG

Anda mungkin menghadapi kesukaran apabila cuba menggantikan rujukan imej dengan ikon Font Awesome dalam fail SVG menggunakan sintaks berikut:

<g><i>

The Punca Asas

Teg tidak diiktiraf sebagai elemen SVG yang sah. Sebaliknya, anda perlu memasukkan aksara Unikod sebenar yang memaparkan ikon yang dikehendaki.

Mendapatkan Aksara Unikod

Untuk memperoleh aksara Unikod, rujuk lembaran gaya Font Awesome, di mana setiap ikon diwakili oleh nilai heksadesimal yang terbungkus dalam aksara f, seperti f0c0 untuk ikon awan. Tetapi dalam SVG, sintaks mesti disesuaikan: tukar f0c0 kepada .

Sintaks Contoh

Sintaks terlaras untuk memasukkan ikon awan dalam SVG ialah:

<g><text x="12" y="15">&#xf0c2;</text></g>

Penggayaan pertimbangan

Untuk memastikan ikon kelihatan, tambahkan peraturan CSS berikut pada lembaran gaya anda:

svg text {
   font-family: FontAwesome;
}

Nota untuk Font Awesome 5 Percuma

Jika menggunakan versi percuma Font Awesome 5 atau lebih tinggi, pengisytiharan keluarga fon harus dikemas kini kepada:

svg text {
   font-family: 'Font Awesome 5 Free';
}

Atas ialah kandungan terperinci Bagaimana untuk Membenamkan Ikon Hebat Font dalam Imej SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!