Tối ưu hóa phông chữ Awesome chỉ cho các lớp đã sử dụng

Tôi đang sử dụng tệp Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass để tạo nó _font-awesome.sass để tôi có thể @importtrong dự án Sass của mình. Tôi cũng đang sử dụng http://middlemanapp.com/ để chuyển đổi Sass sang Css . Câu hỏi:

1. Có cách nào để chỉ chuyển các lớp biểu tượng đã sử dụng vào .css đã chuyển đổi của tôi không? Bởi vì hiện tại nó mang tất cả các lớp từ _font-awesome.sass

2. THƯỞNG: Có thể biên dịch lại phông chữ bằng cách nào đó với các lớp biểu tượng đã sử dụng để làm cho nó nhỏ hơn khi sử dụng sản xuất không?

Nếu tôi có thể nhận được một số mẹo về số 1 ở trên, điều đó sẽ đủ tuyệt vời.

Cảm ơn.

Sass không biết bạn đang thực sự sử dụng những lớp nào. Đây là thứ bạn sẽ phải tự cắt tỉa theo cách thủ công. Mở tệp .scss được cung cấp và lấy bất kỳ thứ gì bạn không cần.

Việc tự chỉnh sửa tệp phông chữ để loại bỏ các glyph không cần thiết yêu cầu ứng dụng của bên thứ 3 thực hiện và nằm ngoài phạm vi của câu hỏi này.

Fontello là một dịch vụ web trực tuyến có thể làm tất cả những điều này cho bạn. Nó cho phép bạn trộn và kết hợp giữa nhiều bộ sưu tập phông chữ biểu tượng để tạo tệp phông chữ hoàn hảo cho dự án của bạn. Ngoài tệp phông chữ tùy chỉnh, nó cung cấp nhiều tệp .css chứa các kiểu đã được tạo cho bạn (thay đổi phần mở rộng thành .scss sẽ cho phép bạn nhập chúng vào dự án Sass hiện có của mình).

fontello rất tốt nhưng IcoMoon còn tuyệt vời hơn.

Giờ đây, bạn có thể đặt các biểu tượng con từ Font-awesome để sử dụng trong sản xuất. Hiện đã có một công cụ tập hợp con chính thức được gọi là icnfnt , cho phép bạn chọn và chỉ gói các biểu tượng bạn cần từ phiên bản Font-awesome (v3.0.2) hiện tại.

Tải xuống tùy chỉnh cũng bao gồm tất cả mã CSS, LESS, SCSS và SASS!

Tôi sử dụng LESS chứ không phải SASS nên bạn có thể phải điều chỉnh cách triển khai của mình.

Môi trường:

• Phông chữ tuyệt vời 4.5.0 (phiên bản hiện tại)
• Ubuntu 14.04 LTS
• bấu víu

Sử dụng điều này để tạo danh sách các số ký tự Unicode mà bạn cần:

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

Sau đó, bạn sử dụng điều này với FontSquirrel ở chế độ chuyên gia, nơi bạn chọn tập hợp con tùy chỉnh: http://www.fontsquirrel.com/tools/webfont-generator

Trong phạm vi Unicode, hãy nhập các giá trị được phân tách bằng dấu phẩy ở trên.

Sau đó, để xóa những thứ không cần thiết khỏi CSS:

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

Bạn sẽ cần mở less/font-awesome/icons.lessvà dán đầu ra từ grep vào tệp.

Chà, sass chắc chắn có thể được chỉnh sửa một chút để làm cho các bộ chọn %dựa trên để chúng chỉ có thể mở rộng. Khi điều này được thực hiện, các lớp có thể được tạo để phù hợp với các biểu tượng mong muốn và sau đó có thể tạo @extendra các lớp có phông chữ tuyệt vời.

Cá nhân tôi làm điều này và không thực sự sử dụng các lớp trong đánh dấu, và chỉ sử dụng bộ chọn cho các phần tử có liên quan và @extendchúng với các lớp này.

Thí dụ:

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

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

Sau đó, trong scss của bạn

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

Et thì đấy.

Fontastic đã làm việc cho tôi (nó đã được liệt kê trên trang github Font Awesome ). Chọn glyphs mà bạn cần và tải chúng xuống dưới dạng phông chữ tùy chỉnh mới. Công cụ tuyệt vời.

Iconmoon đã làm việc cho tôi. Tôi đã sử dụng nó bằng cách nhập tệp svg từ font-awesome, do đó đảm bảo tôi nhận được các biểu tượng tôi muốn chứ không chỉ những biểu tượng có sẵn trên trang web của họ. Ngoài ra, liên kết này đã giúp tôi tích hợp các biểu tượng mới https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/