Hướng dẫn tạo Web Font Icon với các icon riêng

Nổi tiếng và thông dụng nhất có thể kể đến là thư viện Font Awesome, đây là thư viện với hơn 700 icon font bao gồm cả miễn phí và trả phí. Ngoài ra còn rất nhiều các thư viện khác như Bootstrap, Fontello, GlyphSearch v.v… Hầu hết các icon thông dụng mà bạn cần đều miễn phí và có thể tìm thấy trong các bộ thư viện này.

Chúng ta cùng tìm hiểu qua Web Font Icon là gì và ưu điểm của nó nhé.
Trước đây khi chưa có web font nếu chúng ta muốn chèn 1 icon nhỏ vào website chúng ta sẽ phải chèn vào icon đó như 1 hình ảnh, trường hợp chúng ta muốn có hiệu ứng như để bình thường thì màu xanh, di chuột vào đổi thành màu đỏ thì chúng ta bắt buộc phải có 2 hình ảnh, 1 màu xanh và 1 màu đỏ, trường hợp chúng ta có 10 icon khác nhau cần đổi màu thì chúng ta sẽ cần tổng cộng 20 hình ảnh khác nhau, mỗi khi hiển thị, website sẽ cần phải kết nối 20 lần để có thể tải về hết 20 hình này, mà chúng ta đã biết, kết nối càng nhiều thì website sẽ càng chậm.
Để giải quyết vấn đề này thì một kỹ thuật gọi là CSS Image Sprites ra đời, ý tưởng chính là đưa tất cả các icon cần sử dụng vào một hình ảnh duy nhất, mỗi icon trong hình ảnh này sẽ được xác định dựa vào tọa độ và kích thước để hiển thị chính xác trên website.
Kỹ thuật này có ưu điểm là chỉ cần load 1 hình ảnh là sử dụng được cho tất cả icon, nhược điểm là kích thước các hình ảnh phải chính xác tuyệt đối, vẫn cần tổng 20 hình ảnh cho các icon và việc thay đổi kích thước hình ảnh gặp nhiều khó khăn do phụ thuộc độ phân giải của hình ảnh.

Với sự hỗ trợ của các trình duyệt và chuẩn CSS3 ta có thể tạo các icon dưới dạng Symbol Font tức là các icon cũng có thuộc tính cơ bản của ký tự là Font Size, Color v.v… các icon này lưu trữ dưới dạng vector vì vậy khi kích thước icon to hay nhỏ đều hiển thị sắc nét. Các icon dạng này được gọi là Web Font Icon.

Để tạo được các icon font, đầu tiên chúng ta phải thiết kế các icon này dưới dạng vector, có thể dùng Corel hoặc Illustrator để thiết kế và lưu file dưới định dạng .svg.
Nếu có thời gian ta có thể làm tất cả các icon mà chúng ta muốn, trên thực tế một số website đã cung cấp miễn phí các công cụ và icon cơ bản để sử dụng, chúng ta chỉ cần tạo các icon mà không có miễn phí hoặc các icon đặc biệt chỉ chúng ta cần dùng như icon logo công ty hay icon avatar riêng hoặc đơn giản thay vì phải sử dụng 1 bộ font mặc định cả trăm icon nhưng không cần sử dụng hết chúng ta chỉ muốn tạo bộ font bao gồm một số icon mà ta cần sử dụng.
Chúng ta có thể làm hết mọi thứ một cách thủ công nhưng để tiết kiệm thời gian chúng ta sẽ sử dụng công cụ mà Fontello cung cấp để tạo Web Font nhanh hơn.
Bước 1: Vào website http://fontello.com
Cách sử dụng hết sức đơn giản kéo từ trên xuống dưới để xem icon nào muốn sử dụng, cần sử dụng cái nào thì click vào icon đó, một vòng tròn bao quanh icon xuất hiện nghĩa là icon đó đã được sử dụng, muốn bỏ icon không sử dụng nữa thì click thêm 1 lần vào icon khi đó vòng tròn sẽ biến mất.
Để thêm 1 icon riêng vào bộ font thì kéo thả file thiết kế SVG vào mục Customer Icon khi đó icon sẽ xuất hiện trong mục này. Lưu ý: các file thiết kế phải là các đường liền nét (Compound Path)

Bước 2: Sau đi đã chọn xong các icon, nhấn nút Download webfont để tải về bộ web font trong đó bao gồm:
+ Thư mục css: chứa file .css để include vào website
+ Thư mục font: chứa các file dành cho font bao gồm .eot, .svg, .ttf, .woff, .woff2

Bước 3: copy toàn bộ các tài nguyên trên vào thư mục chứa website của bạn và include file .css vào website.
Tại vị trí cần sử dụng icon chèn vào code sau: Ví dụ:
trong đó ten-icon lấy theo bảng sau:
Bảng này là file demo.html có trong thư mục web font mà bạn đã download về.