Font awesome là gì? Cách sử dụng font awesome cho website

FontAwesome

Nếu bạn đã tìm hiểu về các kỹ thuật CSS Image Sprites thì chắc cũng hình dung ra được mức độ khổ sở nếu như phải làm việc này. Đó là các icon phải được chèn chính xác trong từng pixel nêu không muốn hiển thị sai vị trí. Hoặc đau đầu hơn bạn cần phải cắt thật chính xác từng mẫu icon trong file giới thiệu về giao diện PSD mẫu tuy nhiên chuyện này sẽ trở thành dĩ vãng vì bạn có thể thực hiện điều này một các đơn giản và dễ dàng hơn nhờ những thủ thuật khác. Vậy cần hiểu chính xác về Web Font Icon là gì và nó có liên quan gì đến thủ thuật chèn icon vào website qua Font Awesome.

Font Awesome là gì?

Font Awesome được biết đến là một trong những thư viện chứa các font chữ là những ký hiệu về hình ảnh được sử dụng trong website. Đây là một trong những chữ ký hiệu chính xác là những icons mà thường được sử dụng chèn trong các layout trong website.

Font Awesome
Font Awesome

Xem thêm: Vì sao bạn nên sử dụng font chữ việt hóa

Font Awesome có thể xây dựng thành những định dạng với nhiều file font khác nhau như file otf, eot, ttf,… do vậy bạn dễ dàng sử dụng để đưa và sử dụng và hiện nay nó đều tương thích với các hệ điều hành trên máy tính và nó đều chạy được trên các hệ điều hành khác nhau. 

Ngoài các icon thông thông thường hay sử dụng thì nhờ font này bạn có thể kết hợp với CSS3 để tạo nên những hiệu ứng icon chuẩn đẹp hơn. 

Hiện nay font này tương thích với hầu hết các trình duyệt hiện nay tuy nhiên với các phiên bản cũ IE7 thì nó không còn là sự hỗ trợ nữa vì coi như là nó đã chế. Nếu bạn biết cách sử dụng Bootstrap để xây dựng CSS thì việc xây dựng website dễ dàng nhận ra được sự cần thiết của việc sử dụng Font Awesome vì chúng kết hợp được với nhau khá tốt và có sự tương thích trên hầu hết các phiên bản tại các trình duyệt hiện nay và chúng có sự kết hợp tốt với nhau tạo nên những hiệu ứng vô cùng bắt mắt. 

Như vậy hiểu đơn giản là Font Awesome để chỉ một trong những bộ icon được thiết kế dưới dạng Symbol Font tức là việc ám chỉ các font chữ ký hiệu tương tự trong các phần mềm soạn thảo văn bản sau đó được chèn vào trang web dưới dạng font chữ thông qua các thuộc tính của CSS3 do vậy chỉ cần nhấn một lần bạn đã có thể sử dụng tất cả các hiệu ứng icon 

Ngoài ra các icon này được thiết kế dưới dạng vector do vậy nó có thể hiển thị sắc nét dù bạn có phóng to như thế nào đi nữa và một điều là bạn có thể đặt nó dễ dàng ở bất kỳ đâu trên trang web và có thể thay đổi bất kỳ đâu trên trang cũng như màu sắc của nó chỉ với các kiến thức về HTML và CSS hết sức cơ bản.

Với hơn 600 icon dùng để trang trí trên website được tạo và phát triển bởi chuyên viên lập trình Dave Gandy thì hầu như các con icon mà bạn muốn sử dụng để trang trí đều được thể hiện ở đây do vậy các sử dụng của nó thực sự đơn giản và các bạn có thể tìm về trang chủ của nó để tải về và chén vào website bằng việc tự cài đặt hay sử dụng theo các hướng dẫn dưới đây:

Hướng dẫn cài đặt Font Awesome

cài đặt Font Awesome
Cài đặt Font Awesome

Đầu tiên bạn cần phải nhúng tập tin CSS của font awesome vào trong website của bạn và với thời điểm hiện tại bạn truy cập vào các phiên bản mới nhất tại các trang chủ của font awesome để cập nhật thêm các phiên bản sử dụng mới nhất. Nếu bạn không thể tự mình thực hiện, hãy liên hệ với công ty thiết kế website của mình để được hỗ trợ nhúng link vào source code.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Tiếp sau đó bạn truy cập vào  http://fontawesome.io/icons/ rồi lựa chọn bộ icon để sử dụng, lưu ý để tên của icon đó và lựa chọn icon để sử ví dụ với icon có tên là anchor chẳng hạn, để hiển thị trên trình duyệt web bạn có thể viết như sau: 

<i class=”fa fa-anchor”></i>

Ngoài ra bạn cũng có thể thay đổi màu sắc trong bộ icon của font awesome 

Mặc định rằng bộ font này có màu đen do vậy để thay đổi màu sắc của nó bạn có thể sử dụng CSS việc này thực hiện cũng khá đơn giản ví dụ như 

<i class=”fa fa-anchor” style=”color: #2980b9;”></i>

Việc sử dụng font này thực sự đơn giản và tiện lợi phải không nào. Ngoài ra bạn có thể tham khảo thêm về bảng thống kê các icon thông qua địa chỉ website uy tín trên mạng xã hội hoặc bạn cũng có thể tham khảo thông qua bảng thống kê qua các phần Example để thấy được sự lợi hại của bộ font này trong quá trình tạo nên sự ấn tượng chuyên nghiệp cho website của bạn và chắc chắn nó thực sự xứng đáng với cái tên “awesome” phải không nào?

Như vậy bạn không cần lo lắng về việc trang trí website của bạn nữa vì với font Awesome thì mọi thứ bạn có thể sử dụng thật dễ dàng đúng không nào? Ngoài ra với font  awesome ra, cũng còn nhiều các trang cung cấp cho bạn bộ web của font icon độc đáo khác bạn có thể tận dụng như IcoMoon, Typicons, Material icons, Fontello,… Nếu bạn muốn tìm hiểu sâu hơn về các bộ font của icon này bạn cần nhờ đến sự trợ giúp của Glyph Search.Đây chính là một trong những website cung cấp chức năng tìm kiếm và coppy nhanh các mã HTML của các loại font icon phổ biến.

Như vậy với thông tin cung cấp trên hi vọng bạn có thêm kiến thức cũng như sự lựa chọn để có thể tạo nên những hiệu ứng sinh động của những website. 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *