การใช้แบบอักษรไอคอนเพื่อสร้างไอคอนมีประโยชน์ต่อไปนี้เมื่อเทียบกับไอคอนที่ใช้ภาพ:
1. ขนาดการเปลี่ยนแปลงฟรี
2. ปรับเปลี่ยนสีได้อย่างอิสระ
3. เพิ่มเอฟเฟกต์เงา
4.ie6 สามารถรองรับได้
5. สนับสนุนคุณสมบัติอื่น ๆ ของไอคอนภาพเช่นความโปร่งใสและการหมุน ฯลฯ
6. คุณสามารถเพิ่มแอตทริบิวต์เช่นข้อความจังหวะและคลิปพื้นหลัง: ข้อความตราบเท่าที่เบราว์เซอร์รองรับ
ใช้อย่างไร?การดัดแปลงข้อความ:
<H3><span aria-hidden = true data-icon = ⇝> </span>
สถิติ
</h3>
[data-icon]: ก่อน {
Font-Family: ไอคอน; / * ตัวอักษรไอคอน BYO, แมปอย่างชาญฉลาด */
เนื้อหา: attr (data-icon);
พูด: ไม่มี; /* ไม่น่าเชื่อถือ แต่เดี๋ยวก่อน -
-
ไอคอนแต่ละรายการ:
<a href =# class = icon-alone>สร้างแบบอักษรไอคอนของคุณเอง - iComoon<span aria-hidden = true data-icon = ▨> </span>
<span class = screen-reader-text> rss </span>
</a>
/ * CSS เดียวกับด้านบนบวก */
.icon-Alone {
แสดง: Inline-Block; / * Chrome 19 เป็นเรื่องแปลกกับการคลิกโดยไม่มีสิ่งนี้ */
-
.screen-reader-text { / * นำกลับมาใช้ใหม่ได้ประเภทกล่องเครื่องมือของคลาส * / /
ตำแหน่ง: สัมบูรณ์;
ด้านบน: -9999px;
ซ้าย: -9999px;
-
หากคุณต้องการสร้างไอคอนของคุณเองขอแนะนำให้ใช้ไอคอนมูน การใช้มันคุณสามารถสร้างแบบอักษรไอคอนที่คุณต้องการได้โดยการอัปโหลด SVG หรือแบบอักษร บทความนี้เป็นการสาธิตออนไลน์โดยใช้ไอคอนเพื่อสร้าง
ขั้นตอนที่ 1: เลือกสิ่งที่พวกเขาให้หรืออัปโหลดของคุณเอง ขั้นตอนที่ 2:กรุณาเยี่ยมชมการสาธิตออนไลน์เพื่อดูผลลัพธ์ ฉันหวังว่าคุณจะชอบแบบอักษรไอคอน หากคุณคิดว่าไอคอนไม่ราบรื่นพอคุณสามารถพิจารณาใช้ CUFON สำหรับการประมวลผลเพื่อให้ไอคอนที่สร้างขึ้นนั้นสวยงามกว่า
ที่มา: http://www.gbin1.com/technology/css/20120827-icon-font-usage/