Saat menulis halaman front-end, kami sering menggunakan beberapa gambar seperti ikon kecil. Jika Anda menggunakan gambar, kodenya lebih merepotkan. Baru -baru ini, saya menemukan metode yang nyaman dan praktis, cukup gunakan secara langsung.1. Perkenalkan metode operasi gambar
Pertama, kami memasukkan URL: https://www.iconfont.cn/
Jika Anda tidak dapat mengingat situs web ini, Anda dapat mencari di vektor Baidu: Alibaba, dan situs web ini akan muncul;
Berikut adalah dua metode yang lebih umum digunakan dan nyaman.
Metode 1: Referensi Kelas FontLangkah 1: Masukkan situs web dan kami dapat melihat kotak pencarian, langsung memasukkan nama ikon yang Anda inginkan, atau Anda dapat menemukannya di perpustakaan ikon.
Langkah 2: Kemudian tambahkan ke keranjang belanja.
Langkah 3: Klik keranjang belanja untuk membuat proyek baru dan konfirmasi bahwa jika Anda ingin menambahkan gambar ke proyek yang sama, Anda tidak perlu membuatnya kembali.
Langkah 4: Selanjutnya, halaman berikut akan muncul, salin kode dan referensi dokumen kode.
<tautan rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
Langkah 5: Saat memperkenalkan kode, ingatlah untuk menambahkan http:
Langkah 6: Pilih ikon yang sesuai dan dapatkan nama kelas untuk menyalin dan menempel, gunakan no-referrer src =/img/bvbb5hz/lihat src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title = Image.jpg.jpg>
<body> <i class/= iconfont icon-xxx> </i> </body>Metode 2: Referensi Simbol
Langkah 1: Jika suatu proyek ingin menggunakan beberapa ikon, Anda juga dapat memilih ikon yang ingin Anda gunakan dan menambahkannya ke keranjang belanja, lalu klik perbarui kode, dan kemudian perbarui koneksi referensi kode. Metode ini perlu diunduh secara lokal.
Langkah 2: Setelah mengunduh, Anda dapat melihat beberapa file di folder dan memperkenalkan file JS pada halaman kode.
<tautan rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script>
Langkah 3: Masukkan paket file di direktori yang sama, sehingga referensi ke ikon dapat berlaku.
Langkah 4: Ke metode yang sama, kita perlu merujuk ke nama gambar di bawah ikon, dan menyalin dan menempel nama gambar di SVG, dan mengganti href = Ubah nama.
<svg class = ikon aria-hidden = true> <use xlink: href =#icon-079aiqing> </use> </svg>
Langkah 5: Selain memperkenalkan dua alamat file di atas pada halaman kode, kita juga perlu memperkenalkan sepotong kode gaya.
<tyle> .icon {width: 1em; Tinggi: 1em; vertikal -align: -0.15em; Isi: CurrentColor; meluap: tersembunyi; } </style>Berikut ini adalah semua kode untuk referensi
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>Alibaba vector </title> <link rel=stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <tyle> .icon {width: 1em; Tinggi: 1em; vertikal -align: -0.15em; Isi: CurrentColor; meluap: tersembunyi; } </tyle> <body> <input type = Text placeholder = Search> <svg class = ikon aria-hidden = true> <use xlink: href =#icon-079aiqing> </ use> </svg> </body> </html>Efek Kode:
Meringkaskan:Metode pertama dapat digunakan secara langsung dengan memperkenalkannya, yang cepat dan nyaman, dan tidak memerlukan pengunduhan, yang lebih mudah digunakan. Kerugiannya hanya dapat digunakan sendiri dan tidak mendukung warna.
Metode kedua mendukung multi-warna dan beberapa gambar, dan efek memperkenalkan beberapa gambar akan lebih baik. Kerugian perlu diunduh ke paket file lokal dan harus ditempatkan di direktori yang sama sebelum digunakan.
Secara keseluruhan, grafik vektor Alibaba sangat membantu pengembang front-end dan bebas digunakan. Anda dapat menggunakan metode di atas sesuai dengan kebutuhan Anda.
Di atas adalah semua konten artikel ini. Saya harap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.