เมื่อเขียนหน้าส่วนหน้าเรามักจะใช้รูปภาพบางส่วนเช่นไอคอนขนาดเล็ก หากคุณใช้รูปภาพรหัสจะลำบากมากขึ้น เมื่อเร็ว ๆ นี้ฉันพบวิธีที่สะดวกและใช้งานได้จริงเพียงแค่ใช้โดยตรง1. แนะนำวิธีการใช้งานรูปภาพ
ก่อนอื่นเราเข้าสู่ URL: https://www.iconfont.cn/
หากคุณจำเว็บไซต์นี้ไม่ได้คุณสามารถค้นหา Baidu: Alibaba Vectors และเว็บไซต์นี้จะปรากฏขึ้น
นี่คือวิธีการที่ใช้กันทั่วไปและสะดวกกว่าสองวิธี
วิธีที่ 1: การอ้างอิงระดับตัวอักษรขั้นตอนที่ 1: ป้อนเว็บไซต์และเราสามารถดูช่องค้นหาป้อนชื่อไอคอนที่คุณต้องการโดยตรงหรือคุณสามารถค้นหาได้ในไลบรารีไอคอน
ขั้นตอนที่ 2: เพิ่มลงในตะกร้าสินค้า
ขั้นตอนที่ 3: คลิกที่ตะกร้าสินค้าเพื่อสร้างโครงการใหม่และยืนยันว่าหากคุณต้องการเพิ่มรูปภาพในโครงการเดียวกันคุณไม่จำเป็นต้องสร้างใหม่อีกครั้ง
ขั้นตอนที่ 4: ถัดไปหน้าต่อไปนี้จะปรากฏขึ้นคัดลอกรหัสและอ้างอิงเอกสารรหัส
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580LRWJ551.js>
ขั้นตอนที่ 5: เมื่อแนะนำรหัสอย่าลืมเพิ่ม http:
ขั้นตอนที่ 6: เลือกไอคอนที่สอดคล้องกันและรับชื่อคลาสเพื่อคัดลอกและวางให้ใช้ No-ReferRer Src =/img/bvbb5Hz/ดู src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg ttire
<body> <i class/= iconfont icon-xxx> </i> </body>วิธีที่ 2: การอ้างอิงสัญลักษณ์
ขั้นตอนที่ 1: หากโครงการต้องการใช้ไอคอนหลายรายการคุณสามารถเลือกไอคอนที่คุณต้องการใช้และเพิ่มลงในตะกร้าสินค้าจากนั้นคลิกรหัสอัปเดตแล้วอัปเดตการเชื่อมต่ออ้างอิงรหัส วิธีนี้จะต้องดาวน์โหลดในเครื่อง
ขั้นตอนที่ 2: หลังจากดาวน์โหลดคุณสามารถดูไฟล์บางไฟล์ในโฟลเดอร์และแนะนำไฟล์ JS ในหน้ารหัส
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580LRWJ551.js> <สคริปต์ src = iconfont.js> </script>
ขั้นตอนที่ 3: ใส่แพ็คเกจไฟล์ในไดเรกทอรีเดียวกันเพื่อให้การอ้างอิงถึงไอคอนอาจมีผล
ขั้นตอนที่ 4: ไปยังวิธีเดียวกันเราต้องอ้างถึงชื่อภาพด้านล่างไอคอนและคัดลอกและวางชื่อภาพใน SVG และแทนที่ HREF = เปลี่ยนชื่อ
<svg class = icon aria-hidden = true> <ใช้ xlink: href =#icon-079aiqing> </sevg> </svg>
ขั้นตอนที่ 5: นอกเหนือจากการแนะนำที่อยู่ไฟล์สองไฟล์ด้านบนในหน้ารหัสแล้วเรายังต้องแนะนำรหัสสไตล์
<style> .icon {width: 1em; ความสูง: 1em; แนวตั้ง -แนว: -0.15em; เติม: CurrentColor; ล้น: ซ่อน; } </style>ต่อไปนี้เป็นรหัสทั้งหมดสำหรับการอ้างอิง
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0> <meta http-equiv = เนื้อหาที่เข้ากันได้กับ X-UA href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <style> .icon {ความกว้าง: 1EM; ความสูง: 1em; แนวตั้ง -แนว: -0.15em; เติม: CurrentColor; ล้น: ซ่อน; } </style> <body> <อินพุต type = text placeholder = การค้นหา> <svg class = ไอคอน aria-hidden = true> <ใช้ xlink: href =#icon-079aiqing> </use> </svg> </body> </html>รหัสเอฟเฟกต์:
สรุป:วิธีแรกสามารถใช้งานได้โดยตรงโดยการแนะนำซึ่งเร็วและสะดวกและไม่จำเป็นต้องดาวน์โหลดซึ่งสะดวกกว่าในการใช้งาน ข้อเสียสามารถใช้เพียงอย่างเดียวและไม่รองรับสี
วิธีที่สองรองรับหลายสีและรูปภาพหลายภาพและผลของการแนะนำรูปภาพหลายภาพจะดีขึ้น ข้อเสียจะต้องดาวน์โหลดไปยังแพ็คเกจไฟล์ท้องถิ่นและต้องวางไว้ในไดเรกทอรีเดียวกันก่อนใช้งาน
โดยรวมแล้วกราฟิก Alibaba Vector มีประโยชน์มากสำหรับนักพัฒนาส่วนหน้าและมีอิสระในการใช้งาน คุณสามารถใช้วิธีการข้างต้นตามความต้องการของคุณ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น