Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membenamkan Ikon Hebat Fon dalam Imej SVG?

Bagaimanakah Saya Boleh Membenamkan Ikon Hebat Fon dalam Imej SVG?

Barbara Streisand
Lepaskan: 2024-11-23 04:42:42
asal
547 orang telah melayarinya

How Can I Embed Font Awesome Icons within SVG Images?

Termasuk Ikon Hebat Fon dalam Imej SVG

Soalan:

Bagaimana saya boleh memasukkan Ikon Font Hebat ke dalam imej SVG saya? Menggantikan elemen dengan elemen tidak menghasilkan sebarang hasil.

Jawapan:

Kod yang disediakan tidak akan berfungsi kerana

Periksa lembaran gaya CSS Font Awesome untuk menentukan aksara Unicode khusus untuk ikon yang dikehendaki. Contohnya:

.icon-group:before                { content: "\f0c0"; }
.icon-cloud:before                { content: "\f0c2"; }
Salin selepas log masuk

Untuk memasukkan ikon ke dalam SVG anda, gantikan kod asal anda dengan yang berikut:

<g><text x=&quot;12&quot; y=&quot;15&quot;>&amp;#xf0c2;</text></g></p>
<p>Dalam lembaran gaya anda, tambahkan yang berikut:</p>
<pre class="brush:php;toolbar:false">svg text {
   font-family: FontAwesome;
}
Salin selepas log masuk

Jika anda menggunakan versi percuma Font Awesome 5 , gunakan keluarga fon berikut pengisytiharan:

svg text {
   font-family: 'Font Awesome 5 Free';
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membenamkan Ikon Hebat Fon dalam Imej SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan