Sự phát triển không ngừng của công nghệ đã đẩy sự sáng tạo ngày càng trở nên tuyệt vời hơn. Từ khi các trình duyệt bắt đầu tích hợp @font-face thì các thiết kế trên website ngày trở nên phong phú và đầy màu sắc. Đặt biệt, trong giai đoạn hiện nay “Thiết kế phẳng” đang trở thành xu thế thời thượng.

Font icons được biết đến đầu tiên với hai bộ font symbol và wingding trên window. Tôi tin chắc rằng bạn nào xài qua MS Word đều đã sử dụng đến nó. Khi @font-face ra đời, người ta bắt đầu đặt ra câu hỏi “Tại sao thay vì dùng icon bằng hình jpg,png,gif, mình lại không dùng các bộ font icon nhỉ?”.
Chính vì thế, icon font trên web được áp dụng từ lúc đó, và ngày nay nó được áp dụng trở nên phổ biến hơn.

Nếu bạn hỏi, người nào dùng icons font cho web đầu tiên? Tôi không biết. Dự án đầu tiên tôi dùng icons font cách đây cũng gần hai năm rồi. Và lúc đó, các icon free còn rất ít, nên tôi buộc phải tự mình làm riêng một bộ fonts icon cho dự án dựa trên các icon vector miễn phí và tự tạo.

Cách tạo font icon

Việc tạo ra font icon rất phức tạp. Trước tiên, bạn cần phải vẽ các icon ra trên các phần mềm như illustrator, corel hoặc các phần mền tương tự. Sau đó, phải sử dụng phần mềm tạo font để đưa các hình icon vector vào các bảng ký tự trên phần mềm tạo font. (Hiện tại, phần mềm được sử dụng nhiều nhất là FontCreator của high-logic giá $79)
Ví dụ: Chúng ta dùng font Tahoma, khi gõ a b c thì nó sẽ ra các ký tự hình ảnh tương ứng a b c. Nhưng khi dùng icon font, bạn gõ abc thì nó sẽ hiển thị các icon tương ứng với ký tự abc.

Tuy nhiên, tôi nghĩ không phải Web developer nào cũng là một Graphic designer để có thể làm 1 bộ icon font tương ứng. Do đó, tốt nhất, bạn nên dùng các bộ icon font miễn phí để áp dụng cho website của mình. Trong bài tiếp theo tôi sẽ liệt kê ra tất cả các icon font được dùng phổ biết, có phí và miễn phí.

Trong bài này, tôi sẽ dùng bộ icons font “Iconic” của P.J. Onori để làm demo. Bộ icons font này có 171 icon.

Cách sử dụng font-face

Trước tiên chúng ta cần phải tìm hiểu về các dùng @font-face đã. Trong video đầu tiên của tôi về font-face thì cấu trúc của font-face lúc đó cũng rất đơn giản. Tuy nhiên, ngày nay thì nó đã phức tạp hơn nhiều rồi. Nguyên nhân chủ yếu là do các trình duyệt hỗ trợ các định dạng font khác nhau.
Trước tiên, chúng ta phải khai báo font-face trước, thường được đặt ngay trên cùng của tập tin stylesheet.

@font-face {
    font-family: 'font_family_name';
    src: url('font_name.eot');
    src: url('font_name.eot?#iefix') format('embedded-opentype'),
         url('font_name.woff') format('woff'),
         url('font_name.ttf') format('truetype'),
         url('font_name.svg#SourceSansProExtraLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Sau khi khai báo xong, nếu muốn áp dụng nó vào một đoạn paragraph, heading hoặc class hoặc id nào đó. Thì chúng ta chỉ việc áp cho nó thuộc tính font-family, ví dụ:

// font_family_name chính là tên font family đã khai báo ở trên @font-face
h1{font-family:font_family_name}
p{font-family:font_family_name}
.fontface{font-family:font_family_name}
// Khai báo rút gọn
p.font {font: 18px/27px 'font_family_name', Arial, sans-serif;}

Cách áp dụng icons font vào website

Việc áp dụng thường giống nhau. Icon font cũng giống như font thường thôi, chúng ta cũng import cho nó vào stylesheet thông qua font-face và cũng gọi chúng cho các tag, selector thông qua font family.
Ví dụ

@font-face { 
	font-family: 'IconicFill'; 
	src: url('iconic_fill.eot'); 
	src: url('iconic_fill.eot?#iefix') format('embedded-opentype'), 
	url('iconic_fill.ttf') format('truetype'), 
	url('iconic_fill.svg#iconic') format('svg'); 
	font-weight: normal; 
	font-style: normal; 
}

Và chúng ta chỉ việc khai báo thẻ i sẽ bị áp dụng icon.

i{
font-family:IconicFill;
}

Bây giờ chúng ta chỉ việc gọi thẻ i ở html và nó sẽ áp dụng icons font vào cho chúng ta.

Tôi đang dùng icons font này a

Icons font sẽ thay ký tự a khai báo và hiển thị ở ngoài trình duyệt là icon tương ứng với ký tự a.

Tuy nhiên, mỗi nhà phát hành sẽ có một cách hướng người dùng sử dụng font của họ theo cách khác nhau. Ví dụ, ở đây bộ icons font của Iconic lại khác so với cách trên. Nguyên nhân là họ đã làm hết các bước trên rồi, chúng ta chỉ việc gọi các class tương ứng với icon và dùng thôi.

Khi download về, bạn sẽ có một thư mục đầy đủ các file hình ảnh, vector, font. Trong thư mục font thì có hai bộ font “iconic fill” và “iconic stroke”. Trước tiên, bạn tiến hành link stylesheet iconic_stroke.css vào website của bạn.

Sau đó, bạn cứ việc gọi các class tương ứng ra để dùng thôi.

Khi khai báo như vậy, nó sẽ hiển thị ra icon bóng đèn. Vậy các bạn đang tự hỏi là làm sao biết class nào để hiển thị icon nào? Bạn hãy mở file iconic_stroke_demo.html lên để xem các class tương ứng với icon bên cạnh.
Trong 2 class được khai báo thì iconic là cố định – nó khai báo font family, còn lightbulb là khai báo ký tự tương ứng với icon.

Và bạn không thấy ký tự a b c d e f gì nằm trong the span cả. Vậy ký tự đó ở đâu? Nếu các bạn xem kỹ thì ký tự đó được dùng selector :before và thuộc tính content để đưa vào và nó được mã hóa Hexidecimal (cái này chủ yếu để bảo vệ bản quyền font).
Ví dụ

.lightbulb:before{
content: '\e063';
// e063 chính là Hexidecimal Code của ký tự 
}

Kết luận

Icons font rất hay đúng không các bạn. Tuy nhiên, khu sử dụng icons font thì chúng ta chỉ có thể tô màu cho nó thôi. Không thể tạo các hiệu ứng khác như các icon ảnh bình thường.
Ngoài ra, khi sử dụng icons font bạn cũng phải biết cân nhắc, nếu website của bạn sử dụng nhiều các icon khác nhau, thì chúng ta hãy dùng. Nếu chỉ sử dụng ít hơn 5 icon thì tốt nhất nên dùng hình để giải quyết. Vì 1 bộ icons font có hơn 100 icon. Sẽ rất nặng và lãng phí tài nguyên khi dùng.
Chú ý quan trọng nhất, hãy đọc hướng dẫn sử dụng của nhà phát hành icons font để áp dụng cho website của mình. Ví như tôi nói phía trên, mỗi nhà phát hành có các dùng riêng chi bộ font của họ.