เพิ่มประสิทธิภาพ Font Awesome สำหรับคลาสที่ใช้เท่านั้น

ฉันใช้ไฟล์ Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassเพื่อทำให้เป็น_font-awesome.sassดังนั้นฉันจึงสามารถทำได้@importในโครงการ Sass ของฉัน นอกจากนี้ผมยังใช้http://middlemanapp.com/การแปลงSassเพื่อCss คำถาม:

1. มีวิธีในการนำเฉพาะคลาสไอคอนที่ใช้แล้วมาเป็น. css ที่แปลงแล้วของฉันหรือไม่? เพราะตอนนี้มันมีทุกคลาสตั้งแต่_font-awesome.sass

2. โบนัส:เป็นไปได้ไหมที่จะคอมไพล์ฟอนต์ใหม่ด้วยคลาสไอคอนที่ใช้แล้วเพื่อทำให้เล็กลงในการใช้งานจริง?

หากฉันได้รับคำแนะนำเกี่ยวกับ # 1 ข้างต้นนั่นก็น่าจะดีพอ

ขอบคุณ.

Sass ไม่รู้ว่าจริงๆแล้วคุณใช้คลาสอะไร นี่คือสิ่งที่คุณจะต้องตัดทอนด้วยตนเอง เปิดไฟล์. scss ที่ให้มาและแฮ็กสิ่งที่คุณไม่ต้องการ

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

Fontelloเป็นบริการเว็บออนไลน์ที่สามารถทำทั้งหมดนี้ให้คุณได้ ช่วยให้คุณสามารถผสมผสานและจับคู่ระหว่างคอลเลกชันแบบอักษรไอคอนต่างๆเพื่อสร้างไฟล์แบบอักษรที่สมบูรณ์แบบสำหรับโครงการของคุณ นอกจากไฟล์ฟอนต์ที่กำหนดเองแล้วยังมีไฟล์. css หลายไฟล์ที่มีสไตล์ที่สร้างไว้ให้คุณแล้ว (การเปลี่ยนนามสกุลเป็น. scss จะช่วยให้คุณสามารถนำเข้าไฟล์เหล่านั้นไปยังโปรเจ็กต์ Sass ที่คุณมีอยู่ได้)

fontello นั้นดีมาก แต่IcoMoonนั้นยอดเยี่ยมยิ่งกว่า

ตอนนี้คุณสามารถใช้ไอคอนย่อยจาก Font-awesome สำหรับใช้งานจริงได้แล้ว ขณะนี้มีเครื่องมือย่อยอย่างเป็นทางการที่เรียกว่าicnfntซึ่งช่วยให้คุณสามารถเลือกและจัดแพ็คเกจเฉพาะไอคอนที่คุณต้องการจาก Font-awesome เวอร์ชันปัจจุบัน (v3.0.2)

การดาวน์โหลดแบบกำหนดเองยังมีโค้ด CSS, LESS, SCSS และ SASS ทั้งหมด!

ฉันใช้ LESS ไม่ใช่ SASS ดังนั้นคุณอาจต้องปรับการใช้งานของคุณ

สิ่งแวดล้อม:

• Font น่ากลัว 4.5.0 (เวอร์ชันปัจจุบัน)
• Ubuntu 14.04 LTS
• ทุบตี

ใช้สิ่งนี้เพื่อสร้างรายการหมายเลขอักขระ Unicode ที่คุณต้องการ:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

จากนั้นคุณใช้สิ่งนี้กับ FontSquirrel ในโหมดผู้เชี่ยวชาญที่คุณเลือกการตั้งค่าย่อยที่กำหนดเอง: http://www.fontsquirrel.com/tools/webfont-generator

ในช่วง Unicode ให้ป้อนค่าที่คั่นด้วยเครื่องหมายจุลภาคจากด้านบน

จากนั้นเพื่อลบสิ่งที่ไม่จำเป็นออกจาก CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

คุณจะต้องเปิดless/font-awesome/icons.lessและวางผลลัพธ์จาก grep ลงในไฟล์

แน่นอนว่า sass สามารถกระตุกเล็กน้อยเพื่อให้ตัวเลือก%ขึ้นอยู่กับดังนั้นจึงสามารถขยายได้เท่านั้น เมื่อเสร็จแล้วสามารถสร้างคลาสให้ตรงกับไอคอนที่ต้องการจากนั้น@extendคลาสฟอนต์ที่น่ากลัวก็สามารถทำได้

โดยส่วนตัวแล้วฉันทำสิ่งนี้และไม่ได้ใช้คลาสในมาร์กอัปจริง ๆ และเพียงแค่ใช้ตัวเลือกกับองค์ประกอบที่เกี่ยวข้องและ@extendพวกเขากับคลาสเหล่านี้

ตัวอย่าง:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

จากนั้นใน scss ของคุณ

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voila

Fontastic ใช้งานได้สำหรับฉัน (มีการระบุไว้ในหน้า Github Font Awesome ) เลือกร่ายมนตร์ที่คุณต้องการและดาวน์โหลดเป็นแบบอักษรที่กำหนดเองใหม่ เครื่องมือที่ยอดเยี่ยม

Iconmoon ทำงานให้ฉัน ฉันใช้มันโดยการนำเข้าไฟล์ svg จากแบบอักษรที่ยอดเยี่ยมดังนั้นจึงมั่นใจได้ว่าฉันจะได้รับไอคอนที่ต้องการไม่ใช่แค่ไอคอนที่มีอยู่ในไซต์เท่านั้น ลิงก์นี้ยังช่วยฉันในการรวมไอคอนใหม่ https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/