Icon Fonts: มันทำงานอย่างไร?

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

ฉันได้ลองตรวจสอบทรัพยากรแบบอักษรไอคอนที่เกี่ยวข้องที่โหลดใน Chrome เพื่อดูว่าแบบอักษรของไอคอนแสดงไอคอนอย่างไร (เมื่อเทียบกับแบบอักษรทั่วไป) แต่ฉันไม่สามารถทราบได้ว่าเกิดอะไรขึ้น

ฉันยังไม่ประสบความสำเร็จในการค้นหาแหล่งข้อมูลเกี่ยวกับวิธีการทำ "เทคนิคแบบอักษรไอคอน" นี้แม้ว่าจะมีแบบอักษรไอคอนมากมายให้ใช้งานก็ตาม นอกจากนี้ยังมีแหล่งข้อมูลมากมายที่แสดงให้เห็นว่าสามารถรวมฟอนต์ไอคอนได้ อย่างไร แต่ดูเหมือนจะไม่มีใครแบ่งปันหรือเขียนเกี่ยวกับวิธีการทำเช่นนี้!

Glyphiconsมีภาพและไม่ได้ตัวอักษร ไอคอนทั้งหมดจะอยู่ในภาพสไปรต์ (มีให้เลือกเป็นแต่ละภาพ) และจะถูกเพิ่มเข้าไปในองค์ประกอบตามตำแหน่งbackround-images:

ไอคอนตัวอักษรจริง ( FontAwesomeเป็นต้น) ไม่เกี่ยวข้องกับการดาวน์โหลดแบบอักษรที่เฉพาะเจาะจงและทำให้การใช้งานของcontentคุณสมบัติเช่น:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

เนื่องจากcontentคุณสมบัตินี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าสิ่งเหล่านี้จึงใช้ประโยชน์จากรูปภาพด้วย

นี่คือตัวอย่างของ FontAwesome ที่ดิบอย่างสมบูรณ์ในการใช้เป็นแบบอักษรการเปลี่ยน( - คุณอาจไม่เห็นสิ่งนี้!) เป็นรถพยาบาล: http://jsfiddle.net/GWqcF/2

หากคำถามของคุณคือคลาส CSS สามารถแทรกอักขระเฉพาะได้อย่างไร (ซึ่งจะแสดงเป็นไอคอนในแบบอักษรพิเศษ) ให้ดูที่แหล่งที่มาของ FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

ดังนั้นคำสั่งเนื้อหา CSS จึงถูกใช้เพื่อแทรกอักขระ (ซึ่งมาจากพื้นที่สงวนการใช้งานส่วนตัวพิเศษของ Unicode ที่ไม่ทำให้ผู้อ่านคนอื่นสับสน)

ไอคอนเว็บฟอนต์ทำงานอย่างไร

ไอคอนแบบอักษรบนเว็บทำงานโดยใช้ CSS เพื่อแทรกสัญลักษณ์เฉพาะลงใน HTML โดยใช้คุณสมบัติเนื้อหา จากนั้นใช้@font-faceโหลดเว็บฟอนต์ dingbat ที่จัดรูปแบบสัญลักษณ์ที่ฉีดเข้าไป ผลที่สุดคือสัญลักษณ์ที่ฉีดกลายเป็นไอคอนที่ต้องการ

ในการเริ่มต้นคุณจะต้องมีไฟล์แบบอักษรบนเว็บที่มีไอคอนที่คุณต้องการซึ่งกำหนดไว้สำหรับASCIIอักขระเฉพาะ(A, B, C, !, @, #, etc.)หรือในพื้นที่การใช้งานส่วนตัวของฟอนต์ Unicode ซึ่งเป็นช่องว่างในแบบอักษรที่จะไม่ถูกใช้โดยอักขระเฉพาะใน a แบบอักษรที่เข้ารหัส Unicode

อ่านเพิ่มเติมวิธีการสร้างไอคอน webfont ที่ไอคอน Webfont ตอบสนอง