Hướng dẫn Tìm hiểu và áp dụng Icon fonts

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Tìm hiểu và áp dụng Icon fonts

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. Mình 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.

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.

iconic.png


arial.png

Tuy nhiên, mình 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 mình sẽ liệt kê ra tất cả các icon font được dùng phổ biết, có phí và miễn phí.

icon.png

Trong bài này, mình 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ách dùng @font-face đã. Trong video đầu tiên của mình 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.
Mã:
@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ụ:
Mã:
// 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ụ:
Mã:
@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.
Mã:
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.
Mã:
<p>Tôi đang dùng icons font này <i>a</i></p>

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 liên kết stylesheet iconic_stroke.css vào website của bạn.
Mã:
<link rel='stylesheet' href='iconic_stroke.css' type='text/css' media='screen' />

Sau đó, bạn cứ việc gọi các class tương ứng ra để dùng thôi.
Mã:
<span class="iconic lightbulb"></span>

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.

debug.png

Và bạn không thấy ký tự a b c d e f gì nằm trong thẻ 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ụ:
Mã:
.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, khi 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ư mình nói phía trên, mỗi nhà phát hành có cách dùng riêng cho bộ font của họ.

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


Nguồn: izwebz.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom