Tutorial 2x Reduce FontAwesome icon font file size - Giảm kích thước tệp biểu tượng FontAwesome cho XenForo 2

[PVS]

Reduce FontAwesome icon font file size - Giảm kích thước tệp biểu tượng FontAwesome cho XenForo 2

Giao diện XenForo 2.1 mặc định bao gồm bộ sưu tập biểu tượng FontAwesome Pro. Các biểu tượng được tải xuống cùng với trang dưới dạng ba tệp phông chữ .woff hoặc .woff2 riêng biệt bao gồm tất cả 7.800+ biểu tượng FontAwesome, mặc dù giao diện XenForo chỉ sử dụng ~262 trong số các biểu tượng này. Điều này có nghĩa là khách truy cập mới vào trang web của bạn tải xuống hơn 385kB dữ liệu, hầu hết trong số đó không bao giờ được sử dụng.

Tôi đã xác định các glyph được sử dụng trong chủ đề XenForo 2.1 mặc định và tạo các tệp phông chữ FontAwesome mới chỉ chứa các biểu tượng cần thiết. Các tệp mới này chỉ có 31,9kB, tương ứng với mức tiết kiệm 353kB, tương đương 91%. Điều này có thể giảm đáng kể lượng băng thông cần thiết để phục vụ một trang trên diễn đàn của bạn.

Vì nó trái với giấy phép FontAwesome để phân phối lại các biểu tượng này, tôi không thể chia sẻ các tệp phông được sắp xếp hợp lý với bạn ở đây. Tuy nhiên, tôi có thể cho bạn biết cách tạo các tệp phông chữ tùy chỉnh của riêng bạn, cho phép bạn bao gồm các biểu tượng khác mà bạn có thể muốn sử dụng trong chủ đề của mình.

Hạn chế và rủi ro

• Mặc dù tôi đã cố gắng đảm bảo phương pháp này bao gồm tất cả các phông chữ được sử dụng trong giao diện XenForo mặc định, một số có thể bị thiếu. Sử dụng điều này có nguy cơ của riêng bạn.
• Nếu thiếu glyph, hầu hết các trình duyệt sẽ hiển thị một ô vuông nhỏ trống.
• Nếu bạn muốn thêm một biểu tượng vào chủ đề của mình sau này, bạn sẽ phải xây dựng lại các tệp phông chữ và lặp lại quy trình sau. Hầu hết các trình duyệt sẽ lưu trữ tệp phông chữ cũ, do đó, có thể mất một thời gian để một số khách truy cập xem tệp phông chữ mới trừ khi bạn thực hiện các biện pháp để buộc trình duyệt xác thực lại tệp. Bạn có thể buộc các tệp phông chữ được tải xuống lại bằng cách thêm một tham số tùy chỉnh bổ sung vào URL src: của chúng trong core_fa.less.

Đây có phải là giá trị nó?

Chắc là không. Nếu bạn không hiểu chính xác những gì nó làm, tôi sẽ không khuyên bạn nên làm điều đó. Bộ phông chữ bị giảm có thể gây ra sự cố trong tương lai vì XenForo sử dụng các biểu tượng mới hoặc khi bạn thay đổi giữa các chủ đề khác nhau và nhà thiết kế/nhà phát triển mới có thể không hiểu điều gì gây ra sự cố.

Tuy nhiên, nếu bạn muốn tối ưu hóa tốc độ tải trang của mình, đây là cách hiệu quả và quan trọng nhất để giảm kích thước tải xuống của các trang XenForo.

Hướng dẫn cơ bản

Xác định vị trí các tệp .woff và .woff2 nằm trong /styles/fonts/fa/ trong thư mục XenForo.

Tải xuống và cài đặt FontForge (miễn phí, mã nguồn mở, Win/Mac/Linux).

Khởi động FontForge, sau đó chọn Open và mở fa-regular-400.woff2 từ thư mục /styles/fonts/fa/ của XenForo. Bạn có thể thấy một box pop up với các cảnh báo khác nhau, mà bạn có thể bỏ qua.

Nhấp vào Edit > Select > Select All, hoặc Ctrl+A/Cmd+A.

Bấm vào File > Execute Script. Dán đoạn sau vào hộp script. Không xóa các tab trong tập lệnh này, vì khoảng cách là quan trọng trong Python. Nếu bạn đang sử dụng bất kỳ biểu tượng tùy chỉnh nào, hãy nhớ chèn tên của chúng vào mảng desiredGlyphNames. Không bao gồm tiền tố fa- trong các tên này.

desiredGlyphNames = ['arrows-left','align-justify','arrows-alt','exchange','align-right','align-center','2x','3x','address-card-o','angle-down','angle-left','angle-right','angle-up','arrow-circle-up','arrow-down','arrow-up','backward','ban','bars','bell','bell-slash','bolt','bookmark','bullhorn','calendar','caret-down','caret-left','caret-right','chart-bar','check','check-circle','check-square','chevron-down','chevron-left','chevron-right','chevron-up','circle','clock','cog','cogs','comments','compress','copy','credit-card','download','edit','envelope','exclamation-circle','exclamation-triangle','expand','external-link','eye','eye-slash','facebook','facebook-f','file','file-alt','file-archive','file-audio','file-code','file-excel','file-pdf','file-powerpoint','file-video','file-word','forward','frown','fw','github','globe','history','home','id-badge','info-circle','key','lg','link','linkedin','list','lock','microphone-slash','minus','paint-brush','paperclip','pause-circle','pen','pinterest-p','play-circle','plus','plus-circle','plus-square','power-off','pulse','puzzle-piece','question-circle','quote-left','reddit-alien','reply','rss','save','search','search-minus','search-plus','share','share-alt','shield','sitemap','sort','spin','spinner','square','star','star-half','sync','sync-alt','tags','th','thumbs-up','thumbtack','times','times-circle','toggle-off','toggle-on','trash','trash-alt','tumblr','twitter','unlock','upload','user','user-circle','user-plus','user-times','users','whatsapp','windows','yahoo','align-left','bold','code','cog','dollar-sign','ellipsis-h','ellipsis-h-alt','ellipsis-v-alt','eraser','euro-sign','exclamation-triangle','file-alt','flag','flag-checkered','font','fw','hryvnia','image','indent','info-circle','italic','lg','link','lira-sign','list','list-ol','list-ul','lock','outdent','pound-sign','question-circle','quote-right','redo','ruble-sign','rupee-sign','save','shekel-sign','smile','strikethrough','table','tenge','terminal','text-height','tint','underline','undo','video','video-plus','won-sign','yen-sign','balance-scale','thermometer-half','minus-octagon','cogs','home','sliders-h','puzzle-piece','newspaper','bullhorn','wrench','bug','info','tachometer','asterisk','comment-alt','envelope-open','server','octagon','columns','sync','plus-circle','map','random','fire-extinguisher','medkit','thermometer','language','object-group','paper-plane','life-ring','map-signs']
font = fontforge.activeFont()

for glyph in list(font.selection.byGlyphs):
  glyphNotUsed = (glyph.glyphname not in desiredGlyphNames)
  if glyphNotUsed:
    glyph.clear()

Với đoạn script được dán vào, hãy đảm bảo Python được chọn và nhấn OK.

Sau khi tập lệnh đã chạy, bấm Encoding, rồi Compact. Danh sách các glyph còn lại trong fa-regular-400.woff2 bây giờ sẽ trông giống như thế này:

​

Nhấp vào File > Generate Fonts....

Đảm bảo bạn đã chọn Web Open Font (WOFF2) làm loại phông chữ và bỏ chọn hộp Validate Before Saving. Lưu phông chữ có cùng tên với tệp nguồn.

(Bạn cũng có thể tạo phiên bản .woff của tệp ngay bây giờ nếu bạn muốn. Tuy nhiên, .woff2 là định dạng ưu việt và được hỗ trợ rộng rãi bởi tất cả các trình duyệt hiện đại.)

Lặp lại các bước trên cho các tệp sau trong thư mục XenForo /styles/fonts/fa của bạn (lưu ý rằng sau khi xử lý fa-brands-400.woff2, chỉ còn lại một vài phông chữ logo sau khi bạn nhấp vào Compact). Trừ khi bạn đang sử dụng cụ thể các phông chữ "DuoTone" của FontAwesome, bạn không cần xử lý các tệp đó vì chúng không được sử dụng.

• fa-brands-400.woff2
• fa-light-300.woff2
• fa-solid-900.woff2

Lấy các tệp phông chữ mới được tạo của bạn và ghi đè lên các tệp hiện có trong /styles/font/fa/ trên máy chủ của bạn.

Để xác minh các tệp mới đang được phục vụ trên trang web của bạn, hãy mở Google Chrome's Developer Tools, nhấp vào tab Network, sau đó nhấp vào nút bộ lọc Font. Bạn sẽ thấy các tệp phông chữ trong danh sách này và chúng phải có kích thước từ 2,5 kB đến 15,6 kB.

Nếu bạn vẫn thấy các tệp lớn, giữ con trỏ xuống nút làm mới của trình duyệt và nhấp vào Empty Cache and Hard Reload. Nếu các tệp vẫn không hiển thị, hãy đảm bảo rằng các tệp không được lưu trong bộ nhớ cache của mạng phân phối nội dung (CDN) như Cloudflare.

Để buộc các tệp mới được gửi đến người dùng, hãy thêm văn bản bổ sung vào các tham số URL vào từng tham chiếu @font-face trong template core_fa.less. Dưới đây là một ví dụ về tham chiếu tệp phông chữ fa-light-300 được sửa đổi để bao gồm -min sau URL.

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url('@{fa-font-path}/fa-light-300.woff2?_v=@{fa-version}-min') format('woff2'),
    url('@{fa-font-path}/fa-light-300.woff?_v=@{fa-version}-min') format('woff');
}

Thay đổi tham số này (bạn có thể muốn thêm số phiên bản hoặc thứ gì đó) mỗi lần bạn cập nhật tệp phông chữ.

Hợp lý hóa các tệp CSS

Bạn có thể lưu thêm 37kB (86kB đến 49kB) mỗi trang bằng cách xóa các khai báo CSS FontAwesome không sử dụng khỏi các template của XenForo.

Chỉnh sửa template core_fa.less và xóa nhóm khai báo giữa các dòng 2118 và 4380. Thay thế chúng bằng các dòng sau, bao gồm các biểu tượng thực sự được sử dụng trong chủ đề mặc định.

.@{fa-css-prefix}-align-left:before { content: @fa-var-align-left; }
.@{fa-css-prefix}-arrows-left:before { content: @fa-var-arrows-left; }
.@{fa-css-prefix}-exchange:before { content: @fa-var-exchange; }
.@{fa-css-prefix}-arrows-alt:before { content: @fa-var-arrows-alt; }
.@{fa-css-prefix}-align-justify:before { content: @fa-var-align-justify; }
.@{fa-css-prefix}-align-center:before { content: @fa-var-align-center; }
.@{fa-css-prefix}-align-right:before { content: @fa-var-align-right; }
.@{fa-css-prefix}-angle-double-down:before { content: @fa-var-angle-double-down; }
.@{fa-css-prefix}-angle-double-right:before { content: @fa-var-angle-double-right; }
.@{fa-css-prefix}-angle-double-up:before { content: @fa-var-angle-double-up; }
.@{fa-css-prefix}-angle-down:before { content: @fa-var-angle-down; }
.@{fa-css-prefix}-angle-down:before { content: @fa-var-angle-down; }
.@{fa-css-prefix}-angle-left:before { content: @fa-var-angle-left; }
.@{fa-css-prefix}-angle-left:before { content: @fa-var-angle-left; }
.@{fa-css-prefix}-angle-right:before { content: @fa-var-angle-right; }
.@{fa-css-prefix}-angle-right:before { content: @fa-var-angle-right; }
.@{fa-css-prefix}-angle-up:before { content: @fa-var-angle-up; }
.@{fa-css-prefix}-angle-up:before { content: @fa-var-angle-up; }
.@{fa-css-prefix}-arrow-circle-up:before { content: @fa-var-arrow-circle-up; }
.@{fa-css-prefix}-arrow-down:before { content: @fa-var-arrow-down; }
.@{fa-css-prefix}-arrow-up:before { content: @fa-var-arrow-up; }
.@{fa-css-prefix}-asterisk:before { content: @fa-var-asterisk; }
.@{fa-css-prefix}-backward:before { content: @fa-var-backward; }
.@{fa-css-prefix}-balance-scale:before { content: @fa-var-balance-scale; }
.@{fa-css-prefix}-ban:before { content: @fa-var-ban; }
.@{fa-css-prefix}-bars:before { content: @fa-var-bars; }
.@{fa-css-prefix}-bell-slash:before { content: @fa-var-bell-slash; }
.@{fa-css-prefix}-bell:before { content: @fa-var-bell; }
.@{fa-css-prefix}-bold:before { content: @fa-var-bold; }
.@{fa-css-prefix}-bolt:before { content: @fa-var-bolt; }
.@{fa-css-prefix}-bookmark:before { content: @fa-var-bookmark; }
.@{fa-css-prefix}-bug:before { content: @fa-var-bug; }
.@{fa-css-prefix}-bullhorn:before { content: @fa-var-bullhorn; }
.@{fa-css-prefix}-calendar:before { content: @fa-var-calendar; }
.@{fa-css-prefix}-caret-down:before { content: @fa-var-caret-down; }
.@{fa-css-prefix}-caret-left:before { content: @fa-var-caret-left; }
.@{fa-css-prefix}-caret-right:before { content: @fa-var-caret-right; }
.@{fa-css-prefix}-chart-bar:before { content: @fa-var-chart-bar; }
.@{fa-css-prefix}-check-circle:before { content: @fa-var-check-circle; }
.@{fa-css-prefix}-check-square:before { content: @fa-var-check-square; }
.@{fa-css-prefix}-check:before { content: @fa-var-check; }
.@{fa-css-prefix}-chevron-down:before { content: @fa-var-chevron-down; }
.@{fa-css-prefix}-chevron-left:before { content: @fa-var-chevron-left; }
.@{fa-css-prefix}-chevron-right:before { content: @fa-var-chevron-right; }
.@{fa-css-prefix}-chevron-up:before { content: @fa-var-chevron-up; }
.@{fa-css-prefix}-circle:before { content: @fa-var-circle; }
.@{fa-css-prefix}-circle:before { content: @fa-var-circle; }
.@{fa-css-prefix}-clock:before { content: @fa-var-clock; }
.@{fa-css-prefix}-code:before { content: @fa-var-code; }
.@{fa-css-prefix}-code:before { content: @fa-var-code; }
.@{fa-css-prefix}-cog:before { content: @fa-var-cog; }
.@{fa-css-prefix}-cog:before { content: @fa-var-cog; }
.@{fa-css-prefix}-cogs:before { content: @fa-var-cogs; }
.@{fa-css-prefix}-columns:before { content: @fa-var-columns; }
.@{fa-css-prefix}-comment-alt:before { content: @fa-var-comment-alt; }
.@{fa-css-prefix}-comments:before { content: @fa-var-comments; }
.@{fa-css-prefix}-compress:before { content: @fa-var-compress; }
.@{fa-css-prefix}-copy:before { content: @fa-var-copy; }
.@{fa-css-prefix}-credit-card:before { content: @fa-var-credit-card; }
.@{fa-css-prefix}-desktop:before { content: @fa-var-desktop; }
.@{fa-css-prefix}-dollar-sign:before { content: @fa-var-dollar-sign; }
.@{fa-css-prefix}-download:before { content: @fa-var-download; }
.@{fa-css-prefix}-edit:before { content: @fa-var-edit; }
.@{fa-css-prefix}-ellipsis-h-alt:before { content: @fa-var-ellipsis-h-alt; }
.@{fa-css-prefix}-ellipsis-h:before { content: @fa-var-ellipsis-h; }
.@{fa-css-prefix}-ellipsis-v-alt:before { content: @fa-var-ellipsis-v-alt; }
.@{fa-css-prefix}-envelope-open:before { content: @fa-var-envelope-open; }
.@{fa-css-prefix}-envelope:before { content: @fa-var-envelope; }
.@{fa-css-prefix}-eraser:before { content: @fa-var-eraser; }
.@{fa-css-prefix}-euro-sign:before { content: @fa-var-euro-sign; }
.@{fa-css-prefix}-exclamation-circle:before { content: @fa-var-exclamation-circle; }
.@{fa-css-prefix}-exclamation-triangle:before { content: @fa-var-exclamation-triangle; }
.@{fa-css-prefix}-exclamation-triangle:before { content: @fa-var-exclamation-triangle; }
.@{fa-css-prefix}-expand:before { content: @fa-var-expand; }
.@{fa-css-prefix}-external-link:before { content: @fa-var-external-link; }
.@{fa-css-prefix}-eye-slash:before { content: @fa-var-eye-slash; }
.@{fa-css-prefix}-eye:before { content: @fa-var-eye; }
.@{fa-css-prefix}-facebook-f:before { content: @fa-var-facebook-f; }
.@{fa-css-prefix}-facebook:before { content: @fa-var-facebook; }
.@{fa-css-prefix}-file-alt:before { content: @fa-var-file-alt; }
.@{fa-css-prefix}-file-alt:before { content: @fa-var-file-alt; }
.@{fa-css-prefix}-file-archive:before { content: @fa-var-file-archive; }
.@{fa-css-prefix}-file-audio:before { content: @fa-var-file-audio; }
.@{fa-css-prefix}-file-code:before { content: @fa-var-file-code; }
.@{fa-css-prefix}-file-excel:before { content: @fa-var-file-excel; }
.@{fa-css-prefix}-file-pdf:before { content: @fa-var-file-pdf; }
.@{fa-css-prefix}-file-powerpoint:before { content: @fa-var-file-powerpoint; }
.@{fa-css-prefix}-file-video:before { content: @fa-var-file-video; }
.@{fa-css-prefix}-file-word:before { content: @fa-var-file-word; }
.@{fa-css-prefix}-file:before { content: @fa-var-file; }
.@{fa-css-prefix}-fire-extinguisher:before { content: @fa-var-fire-extinguisher; }
.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
.@{fa-css-prefix}-flag:before { content: @fa-var-flag; }
.@{fa-css-prefix}-font:before { content: @fa-var-font; }
.@{fa-css-prefix}-forward:before { content: @fa-var-forward; }
.@{fa-css-prefix}-frown:before { content: @fa-var-frown; }
.@{fa-css-prefix}-frown:before { content: @fa-var-frown; }
.@{fa-css-prefix}-gamepad:before { content: @fa-var-gamepad; }
.@{fa-css-prefix}-github-alt:before { content: @fa-var-github-alt; }
.@{fa-css-prefix}-github:before { content: @fa-var-github; }
.@{fa-css-prefix}-globe:before { content: @fa-var-globe; }
.@{fa-css-prefix}-history:before { content: @fa-var-history; }
.@{fa-css-prefix}-home:before { content: @fa-var-home; }
.@{fa-css-prefix}-hryvnia:before { content: @fa-var-hryvnia; }
.@{fa-css-prefix}-id-badge:before { content: @fa-var-id-badge; }
.@{fa-css-prefix}-image:before { content: @fa-var-image; }
.@{fa-css-prefix}-image:before { content: @fa-var-image; }
.@{fa-css-prefix}-indent:before { content: @fa-var-indent; }
.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
.@{fa-css-prefix}-info:before { content: @fa-var-info; }
.@{fa-css-prefix}-italic:before { content: @fa-var-italic; }
.@{fa-css-prefix}-key:before { content: @fa-var-key; }
.@{fa-css-prefix}-keyboard:before { content: @fa-var-keyboard; }
.@{fa-css-prefix}-language:before { content: @fa-var-language; }
.@{fa-css-prefix}-laptop:before { content: @fa-var-laptop; }
.@{fa-css-prefix}-life-ring:before { content: @fa-var-life-ring; }
.@{fa-css-prefix}-link:before { content: @fa-var-link; }
.@{fa-css-prefix}-link:before { content: @fa-var-link; }
.@{fa-css-prefix}-linkedin:before { content: @fa-var-linkedin; }
.@{fa-css-prefix}-lira-sign:before { content: @fa-var-lira-sign; }
.@{fa-css-prefix}-list-ol:before { content: @fa-var-list-ol; }
.@{fa-css-prefix}-list-ul:before { content: @fa-var-list-ul; }
.@{fa-css-prefix}-list:before { content: @fa-var-list; }
.@{fa-css-prefix}-list:before { content: @fa-var-list; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-map-signs:before { content: @fa-var-map-signs; }
.@{fa-css-prefix}-map:before { content: @fa-var-map; }
.@{fa-css-prefix}-medkit:before { content: @fa-var-medkit; }
.@{fa-css-prefix}-meh:before { content: @fa-var-meh; }
.@{fa-css-prefix}-microphone-slash:before { content: @fa-var-microphone-slash; }
.@{fa-css-prefix}-minus-octagon:before { content: @fa-var-minus-octagon; }
.@{fa-css-prefix}-minus:before { content: @fa-var-minus; }
.@{fa-css-prefix}-mobile:before { content: @fa-var-mobile; }
.@{fa-css-prefix}-newspaper:before { content: @fa-var-newspaper; }
.@{fa-css-prefix}-object-group:before { content: @fa-var-object-group; }
.@{fa-css-prefix}-outdent:before { content: @fa-var-outdent; }
.@{fa-css-prefix}-paint-brush:before { content: @fa-var-paint-brush; }
.@{fa-css-prefix}-paper-plane:before { content: @fa-var-paper-plane; }
.@{fa-css-prefix}-paperclip:before { content: @fa-var-paperclip; }
.@{fa-css-prefix}-pause-circle:before { content: @fa-var-pause-circle; }
.@{fa-css-prefix}-pen:before { content: @fa-var-pen; }
.@{fa-css-prefix}-pinterest-p:before { content: @fa-var-pinterest-p; }
.@{fa-css-prefix}-pinterest-square:before { content: @fa-var-pinterest-square; }
.@{fa-css-prefix}-play-circle:before { content: @fa-var-play-circle; }
.@{fa-css-prefix}-plus-circle:before { content: @fa-var-plus-circle; }
.@{fa-css-prefix}-plus-square:before { content: @fa-var-plus-square; }
.@{fa-css-prefix}-plus:before { content: @fa-var-plus; }
.@{fa-css-prefix}-pound-sign:before { content: @fa-var-pound-sign; }
.@{fa-css-prefix}-power-off:before { content: @fa-var-power-off; }
.@{fa-css-prefix}-puzzle-piece:before { content: @fa-var-puzzle-piece; }
.@{fa-css-prefix}-question-circle:before { content: @fa-var-question-circle; }
.@{fa-css-prefix}-question-circle:before { content: @fa-var-question-circle; }
.@{fa-css-prefix}-quote-left:before { content: @fa-var-quote-left; }
.@{fa-css-prefix}-quote-left:before { content: @fa-var-quote-left; }
.@{fa-css-prefix}-quote-right:before { content: @fa-var-quote-right; }
.@{fa-css-prefix}-quote-right:before { content: @fa-var-quote-right; }
.@{fa-css-prefix}-random:before { content: @fa-var-random; }
.@{fa-css-prefix}-reddit-alien:before { content: @fa-var-reddit-alien; }
.@{fa-css-prefix}-redo:before { content: @fa-var-redo; }
.@{fa-css-prefix}-reply:before { content: @fa-var-reply; }
.@{fa-css-prefix}-rss:before { content: @fa-var-rss; }
.@{fa-css-prefix}-ruble-sign:before { content: @fa-var-ruble-sign; }
.@{fa-css-prefix}-rupee-sign:before { content: @fa-var-rupee-sign; }
.@{fa-css-prefix}-save:before { content: @fa-var-save; }
.@{fa-css-prefix}-save:before { content: @fa-var-save; }
.@{fa-css-prefix}-search-minus:before { content: @fa-var-search-minus; }
.@{fa-css-prefix}-search-plus:before { content: @fa-var-search-plus; }
.@{fa-css-prefix}-search:before { content: @fa-var-search; }
.@{fa-css-prefix}-server:before { content: @fa-var-server; }
.@{fa-css-prefix}-share-alt:before { content: @fa-var-share-alt; }
.@{fa-css-prefix}-share:before { content: @fa-var-share; }
.@{fa-css-prefix}-shekel-sign:before { content: @fa-var-shekel-sign; }
.@{fa-css-prefix}-shield:before { content: @fa-var-shield; }
.@{fa-css-prefix}-sitemap:before { content: @fa-var-sitemap; }
.@{fa-css-prefix}-sliders-h:before { content: @fa-var-sliders-h; }
.@{fa-css-prefix}-smile:before { content: @fa-var-smile; }
.@{fa-css-prefix}-smile:before { content: @fa-var-smile; }
.@{fa-css-prefix}-sort:before { content: @fa-var-sort; }
.@{fa-css-prefix}-spinner:before { content: @fa-var-spinner; }
.@{fa-css-prefix}-spinner:before { content: @fa-var-spinner; }
.@{fa-css-prefix}-square:before { content: @fa-var-square; }
.@{fa-css-prefix}-star-half:before { content: @fa-var-star-half; }
.@{fa-css-prefix}-star:before { content: @fa-var-star; }
.@{fa-css-prefix}-strikethrough:before { content: @fa-var-strikethrough; }
.@{fa-css-prefix}-sync-alt:before { content: @fa-var-sync-alt; }
.@{fa-css-prefix}-sync:before { content: @fa-var-sync; }
.@{fa-css-prefix}-table:before { content: @fa-var-table; }
.@{fa-css-prefix}-tablet:before { content: @fa-var-tablet; }
.@{fa-css-prefix}-tachometer:before { content: @fa-var-tachometer; }
.@{fa-css-prefix}-tags:before { content: @fa-var-tags; }
.@{fa-css-prefix}-tenge:before { content: @fa-var-tenge; }
.@{fa-css-prefix}-terminal:before { content: @fa-var-terminal; }
.@{fa-css-prefix}-text-height:before { content: @fa-var-text-height; }
.@{fa-css-prefix}-th:before { content: @fa-var-th; }
.@{fa-css-prefix}-thermometer-half:before { content: @fa-var-thermometer-half; }
.@{fa-css-prefix}-thumbs-up:before { content: @fa-var-thumbs-up; }
.@{fa-css-prefix}-thumbtack:before { content: @fa-var-thumbtack; }
.@{fa-css-prefix}-times-circle:before { content: @fa-var-times-circle; }
.@{fa-css-prefix}-times:before { content: @fa-var-times; }
.@{fa-css-prefix}-tint:before { content: @fa-var-tint; }
.@{fa-css-prefix}-toggle-off:before { content: @fa-var-toggle-off; }
.@{fa-css-prefix}-toggle-on:before { content: @fa-var-toggle-on; }
.@{fa-css-prefix}-trash-alt:before { content: @fa-var-trash-alt; }
.@{fa-css-prefix}-trash:before { content: @fa-var-trash; }
.@{fa-css-prefix}-tumblr:before { content: @fa-var-tumblr; }
.@{fa-css-prefix}-twitter:before { content: @fa-var-twitter; }
.@{fa-css-prefix}-underline:before { content: @fa-var-underline; }
.@{fa-css-prefix}-undo:before { content: @fa-var-undo; }
.@{fa-css-prefix}-unlock:before { content: @fa-var-unlock; }
.@{fa-css-prefix}-upload:before { content: @fa-var-upload; }
.@{fa-css-prefix}-user-circle:before { content: @fa-var-user-circle; }
.@{fa-css-prefix}-user-plus:before { content: @fa-var-user-plus; }
.@{fa-css-prefix}-user-times:before { content: @fa-var-user-times; }
.@{fa-css-prefix}-user:before { content: @fa-var-user; }
.@{fa-css-prefix}-users:before { content: @fa-var-users; }
.@{fa-css-prefix}-video-plus:before { content: @fa-var-video-plus; }
.@{fa-css-prefix}-video:before { content: @fa-var-video; }
.@{fa-css-prefix}-video:before { content: @fa-var-video; }
.@{fa-css-prefix}-whatsapp:before { content: @fa-var-whatsapp; }
.@{fa-css-prefix}-windows:before { content: @fa-var-windows; }
.@{fa-css-prefix}-won-sign:before { content: @fa-var-won-sign; }
.@{fa-css-prefix}-wrench:before { content: @fa-var-wrench; }
.@{fa-css-prefix}-yahoo:before { content: @fa-var-yahoo; }
.@{fa-css-prefix}-yen-sign:before { content: @fa-var-yen-sign; }

Lưu ý rằng nếu bạn đang sử dụng bất kỳ biểu tượng tùy chỉnh nào trong chủ đề của mình, bạn sẽ cần đưa chúng vào danh sách này.

Chúc các bạn thành công.

Nguồn: xenforo.com​