วิธีการแสดงแบบอักษรไอคอนบนหน้าเว็บ? รูปแบบการแสดงแบบอักษรไอคอนใน HTML

การใช้แบบอักษรไอคอนเพื่อสร้างไอคอนมีประโยชน์ต่อไปนี้เมื่อเทียบกับไอคอนที่ใช้ภาพ:

1. ขนาดการเปลี่ยนแปลงฟรี

2. ปรับเปลี่ยนสีได้อย่างอิสระ

3. เพิ่มเอฟเฟกต์เงา

4.ie6 สามารถรองรับได้

5. สนับสนุนคุณสมบัติอื่น ๆ ของไอคอนภาพเช่นความโปร่งใสและการหมุน ฯลฯ

6. คุณสามารถเพิ่มแอตทริบิวต์เช่นข้อความจังหวะและคลิปพื้นหลัง: ข้อความตราบเท่าที่เบราว์เซอร์รองรับ

การดัดแปลงข้อความ:

<H3>

<span aria-hidden = true data-icon = &#x21dd;> </span>

สถิติ

</h3>

[data-icon]: ก่อน {

Font-Family: ไอคอน; / * ตัวอักษรไอคอน BYO, แมปอย่างชาญฉลาด */

เนื้อหา: attr (data-icon);

พูด: ไม่มี; /* ไม่น่าเชื่อถือ แต่เดี๋ยวก่อน -

-

ไอคอนแต่ละรายการ:

<a href =# class = icon-alone>

<span aria-hidden = true data-icon = &#x25a8;> </span>

<span class = screen-reader-text> rss </span>

</a>

/ * CSS เดียวกับด้านบนบวก */

.icon-Alone {

แสดง: Inline-Block; / * Chrome 19 เป็นเรื่องแปลกกับการคลิกโดยไม่มีสิ่งนี้ */

-

.screen-reader-text { / * นำกลับมาใช้ใหม่ได้ประเภทกล่องเครื่องมือของคลาส * / /

ตำแหน่ง: สัมบูรณ์;

ด้านบน: -9999px;

ซ้าย: -9999px;

-

หากคุณต้องการสร้างไอคอนของคุณเองขอแนะนำให้ใช้ไอคอนมูน การใช้มันคุณสามารถสร้างแบบอักษรไอคอนที่คุณต้องการได้โดยการอัปโหลด SVG หรือแบบอักษร บทความนี้เป็นการสาธิตออนไลน์โดยใช้ไอคอนเพื่อสร้าง

กรุณาเยี่ยมชมการสาธิตออนไลน์เพื่อดูผลลัพธ์ ฉันหวังว่าคุณจะชอบแบบอักษรไอคอน หากคุณคิดว่าไอคอนไม่ราบรื่นพอคุณสามารถพิจารณาใช้ CUFON สำหรับการประมวลผลเพื่อให้ไอคอนที่สร้างขึ้นนั้นสวยงามกว่า

ที่มา: http://www.gbin1.com/technology/css/20120827-icon-font-usage/