Complete JavaScript

Top Menu

  • Yêu cầu bài viết
  • Sơ đồ trang
  • Liên hệ
  • Ủng hộ mình
  • Newsletter

Main Menu

  • Trang chủ
  • JavaScript
    • Javascript cơ bản
    • JavaScript Tutorial
    • Thủ thuật JavaScript
    • Phỏng vấn JavaScript
    • JavaScript Design Pattern
    • Thư viện và Framework JavaScript
  • Lập trình cơ bản
  • Thủ thuật máy tính
  • Lập trình và cuộc sống
  • Yêu cầu bài viết
  • Sơ đồ trang
  • Liên hệ
  • Ủng hộ mình
  • Newsletter

logo

Complete JavaScript

  • Trang chủ
  • JavaScript
    • Javascript cơ bản
    • JavaScript Tutorial
    • Thủ thuật JavaScript
    • Phỏng vấn JavaScript
    • JavaScript Design Pattern
    • Thư viện và Framework JavaScript
  • Lập trình cơ bản
  • Thủ thuật máy tính
  • Lập trình và cuộc sống
Lập trình cơ bản
Home›Lập trình cơ bản›Tối ưu Font Awesome với IcoMoon

Tối ưu Font Awesome với IcoMoon

By Lam Pham
16/11/2018
164
4
Tối ưu font awesome với icomoon

Font Awesome là một trong những icon font phổ biến nhất hiện nay. Với phiên bản mới nhất hiện tại 5.5.0, Font Awesome hỗ trợ trên 1400 icon free. Tuy nhiên, nếu bạn chỉ muốn sử dụng khoảng 10 đến 20 icon trong đó… thì bạn vẫn phải tải toàn bộ style của Font Awesome. Điều này quả thật là chưa tối ưu. Một câu hỏi đặt ra bây giờ là: làm sao mình vẫn sử dụng được Font Awesome mà chỉ cần tải về style của những icon mình dùng? Sau khi tìm hiểu một số phương pháp thì mình thấy cách tối ưu Font Awesome với IcoMoon là đơn giản và hiệu quả nhất.

Mục lục nội dung

  • 1 Vậy IcoMoon là gì?
  • 2 Tối ưu Font Awesome với IcoMoon
    • 2.1 Bước 1: thêm Font Awesome vào IcoMoon
    • 2.2 Bước 2: lựa chọn các icon sử dụng
    • 2.3 Bước 3: tuỳ chỉnh và tải về package
    • 2.4 Bước 4: sử dụng
  • 3 Lời kết

Vậy IcoMoon là gì?

IcoMoon thực chất là một ứng dụng cho phép bạn tuỳ chỉnh icon font, import SVG để tạo ra font riêng, convert font sang SVG, PDF, XAML, CSH,… Và IcoMoon cung cấp hơn 5000 icon free bằng cách tối ưu các thư viện miễn phí như:

  • IcoMoon – Free
  • Brands
  • Zondicons
  • Hawcons
  • Linecons
  • Broccolidry
  • 60 Vicons
  • Steadysets
  • Entypo+
  • Feather
  • Font Awesome
  • Material Icons
  • Typicons
  • Brankic 1979
  • Eighty Shades
  • Meteocons
  • wpzoom
  • Iconic
  • Elegant Themes – Line Icons
  • Afiado

Và quan trọng hơn cả, IcoMoon cho phép bạn lựa chọn icon mà mình sẽ sử dụng và chỉ tải về style cho những icon đó. Vì vậy, bạn sẽ tối ưu được dung lượng file icon tải về cho trang web của mình.

Tối ưu Font Awesome với IcoMoon

Bước 1: thêm Font Awesome vào IcoMoon

Trước tiên, bạn cần phải vào danh sách các thư viện hỗ trợ của IcoMoon.

Thêm font awesome vào icomoon

Thêm Font Awesome vào IcoMoon

Trong đó, bạn tìm đến phần Font Awesome rồi nhấn vào nút Add để thêm thư viện này vào IcoMoon App.

Bước 2: lựa chọn các icon sử dụng

Bạn vào trang Select để lựa chọn các icon font sử dụng, bằng cách click vào mỗi icon:

Lựa chọn icon sử dụng trong Font Awesome

Lựa chọn icon sử dụng trong Font Awesome

Bước 3: tuỳ chỉnh và tải về package

Sau khi đã lựa chọn được các icon sử dụng rồi, bạn nhấn vào phần Generate Font phía dưới – bên phải của trang web hoặc vào trang Font để tải các icon font về máy tính.

Nếu để ý phía dưới bên phải, bạn sẽ nhìn thấy button Download. Bạn chỉ cần nhấn vào đó thì một file .zip chứa icon font, cùng với ví dụ và cách sử dụng demo sẽ được tải về máy tính.

Tuy nhiên, mình khuyến khích bạn nhấn vào biểu tượng bánh răng bên cạnh để cài đặt một chút trước khi tải package về máy.

Tùy chọn cài đặt trước khi tải icon font về máy

Tùy chọn cài đặt trước khi tải icon font về máy

Trong đó:

  • Font Name: tên package sẽ được tải về. Mặc định là icomoon.
  • Class Prefix và Class Suffix: thêm tiền tố và hậu tố vào tên class của icon. Bạn có thể tuỳ chọn giá trị này nếu cần thiết để tránh xung đột về tên class với các thành phần khác. Mặc định, tiền tố là icon- và hậu tố để trống.
  • Tiếp theo là các tuỳ chọn:
    • Support IE 8: hỗ trợ IE8
    • Support IE 7 và IE6: hỗ trợ IE 7 và IE 6
    • Include metadata in fonts: thêm metadata vào fonts
    • Encode & embed font in CSS: chỉ hỗ trợ gói Premium
    • Generate Sass, Less or Stylus variables: sinh ra các biến số dành cho Sass, Less hoặc Stylus
  • CSS Selector: lựa chọn cách sử dụng font trong CSS với 3 loại CSS Selector.
    • Use i (for selecting <>): sử dụng thẻ i. Ví dụ: <i class="icon-asterisk"></i>
    • Use attribute selectors. Ví dụ: <span class="icon-asterisk"></span>
    • Use a class. Ví dụ: <span class="icon icon-asterisk"></span>
  • Font metrics, Metadata và Version: điều chỉnh kích thước cho font, thêm metadata và thông tin version (cái này mình để mặc định).

Sau khi tuỳ chỉnh xong các cài đặt, bạn tắt cửa sổ này đi và nhấn vào button Download như mình đã nói ở trên để tải về package của font.

Bước 4: sử dụng

Bên trong package này, bạn sẽ thấy hai phần quan trọng như:

  • fonts: thư mục chứa font.
  • style.css: tệp tin khai báo và cài đặt cho các font sử dụng.

Khi sử dụng các font tuỳ chỉnh này, bạn cần phải copy thư mục fonts và tệp tin style.css vào project, rồi cấu hình file html như bình thường:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Còn việc sử dụng các icon này trong HTML như thế nào thì bạn có thể tham khảo thêm trong file demo.html (trong package tải về).

Bạn chú ý: với mỗi cách sử dụng CSS Selector khác nhau thì cách sử dụng sẽ khác nhau (như mình đã nói ở bước 3).

Lời kết

Trên đây là cách tối ưu Font Awesome với IcoMoon mà bạn có thể sử dụng. Với cách này bạn có thể giảm dung lượng Font Awesome tải về từ trên 50KB, xuống còn khoảng vài KB. Nếu có phần nào thắc mắc hoặc khó hiểu thì bạn có thể để lại câu hỏi trong phần bình luận phía dưới, mình sẽ cố gắng giải đáp.

Bình thường bạn sử dụng Font Awesome như thế nào? Có tối ưu hay không? Nếu tối ưu thì tối ưu như thế nào? Chia sẻ với mình và mọi người nhé!

Xin chào và hẹn gặp lại, thân ái!


★ Nếu bạn thấy bài viết này hay thì hãy đăng ký nhận bài viết qua Email hoặc theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

☛ Facebook Fanpage: Complete JavaScript
☛ Facebook Group: Hỏi đáp JavaScript VN
☛ Portfoflio : Lam Pham

Tối ưu Font Awesome với IcoMoon
5 (100%) 2 votes
Chia sẻ:
  • 38
    Shares
TagsCSSPerformance
Previous Article

LocalForage: giải pháp hoàn hảo cho IndexedDB

Next Article

Học React qua ví dụ #6: Tab ...

Lam Pham

Thích công nghệ, yêu lập trình, đam mê JavaScript. Thích street workout, xe mô tô, đánh đàn (Ukulele), phim sitcom, hành động Mỹ,...

4
Tham gia bình luận

avatar
Lưu tên, email và website tại cookies của trình duyệt cho lần bình luận tiếp theo
LƯU Ý NHANH:
1. Sử dụng tên thật và không dùng keyword trong ô Tên bạn.
2. Click vào hình cái chuông bên cạnh nút Gửi bình luận để nhận thông báo.
3. Cú pháp chèn code ĐƠN GIẢN:
<pre class="language-{js/css/bash}"><code>
  {đặt code trong đây}
</code></pre>
4. Đối với code PHỨC TẠP, bạn vui lòng sử dụng GitHub gist, JSFiddle fiddle, hay CodePen...
1 Số lượng chủ đề bình luận
3 Số lượng phản hồi cho các chủ đề bình luận
0 Người theo dõi
 
Bình luận được phản hồi nhiều nhất
Chủ đề bình luận sôi nổi nhất
2 Các tác giả bình luận
Lam Phamyen devy Những người bình luận gần đây
avatar
Lưu tên, email và website tại cookies của trình duyệt cho lần bình luận tiếp theo
LƯU Ý NHANH:
1. Sử dụng tên thật và không dùng keyword trong ô Tên bạn.
2. Click vào hình cái chuông bên cạnh nút Gửi bình luận để nhận thông báo.
3. Cú pháp chèn code ĐƠN GIẢN:
<pre class="language-{js/css/bash}"><code>
  {đặt code trong đây}
</code></pre>
4. Đối với code PHỨC TẠP, bạn vui lòng sử dụng GitHub gist, JSFiddle fiddle, hay CodePen...
mới nhất cũ nhất bình chọn nhiều nhất
yen devy
Khách
yen devy

f-aws5 e hay dùng svg :)) với số lượng icon ít, cảm ơn chia sẻ của anh :))

Ủng hộ1Phản đối  Phản hồi
3 tháng trước
Lam Pham
Tác giả
Lam Pham

Anh thì chưa dùng chức năng svg của Font Awesome bao giờ. Có phải là khi mình dùng icon nào thì chỉ cần copy-paste phần định nghĩa icon đó vào thôi là được nhỉ?

Ủng hộ0Phản đối  Phản hồi
3 tháng trước
yen devy
Khách
yen devy

vâng, coppy phần mã svg và vứt vào html, cách này khá hay vì chỉ cần đoạn mã svg mà k cần import file font or file css mà vẫn custom đc icon theo í muốn, nhưng mìn đoạn mã trong html sẽ hơi rối.

Ủng hộ0Phản đối  Phản hồi
2 tháng trước
Lam Pham
Tác giả
Lam Pham

Thanks em nha.

Ủng hộ0Phản đối  Phản hồi
2 tháng trước

Series Thú vị

  • Vanilla JS Snippets (new !!!)
  • Học JavaScript cho người mới bắt đầu
  • Xoắn não với phỏng vấn JavaScript
  • Lập trình JavaScript với FCC
  • JavaScript Design Pattern
  • Học React qua ví dụ
  • Tối ưu trang web
  • Ảnh chế vui

Chủ đề hay

  • API
  • OOP
  • CSS
  • DOM
  • ES6
  • Git
  • IIFE
  • Debug
  • Plugin
  • RegExp
  • Canvas
  • Ubuntu
  • Windows
  • Template
  • Thuật toán
  • Dịch blog
  • Strict Mode
  • Command Line
  • HTML
  • CORS
  • JSON
  • AJAX
  • Event

Thư viện và Frameworks

  • React • Gatsby.js • Create-react-app
  • FFmpeg •  WordPress
  • jQuery • Mustache.js
  • Node.js

Bạn đang tìm gì?

Bài viết liên quan

Đăng ký nhận bản tin qua Email

Hãy đăng ký ngay để nhận được những bài viết hay nhất và mới nhất về JavaScript hàng tuần nhé!

Bản quyền bài viết

Complete JavaScript giữ bản quyền và hoàn toàn chịu trách nhiệm với mọi nội dung chia sẻ tại website.

Nếu bạn muốn chia sẻ lại nội dung bài viết trên các website khác, vui lòng thực hiện theo những quy định sau đây:

• Trích dẫn rõ nguồn bài viết.
• Không sử dụng vào mục đích thương mại.
• Không sửa đổi hay làm thay đổi nội dung bài viết.

Tuyên bố trên cũng áp dụng trên các trang nhánh và các trang sub-domain của completejavascript.com.

Creative Commons License

Liên Kết

  • Giới thiệu
  • Bản quyền
  • Liên hệ
  • Yêu cầu bài viết
  • Chính sách bảo mật
  • Sách hay nên đọc
  • Lam Pham Blog
  • Ôn luyện thuật toán

Kết nối với mình

Ngoài ra có gì hay

  • Hỏi đáp JavaScript VN
  • Dạy Nhau Học
  • Kipalog
  • Viblo
  • Trang chủ
  • Portfolio
  • Sơ đồ trang
Copyright © 2017-2019 Complete JavaScript. All Rights Reserved.
wpDiscuz