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

Nếu bạn đã tìm tòi về các kỹ thuật CSS Image Sprites thì chắc cũng hình dung ra được mức độ khổ cực nếu như phải làm việc này. Đó là các icon phải được chèn đúng đắn trong từng pixel nêu không mong muốn hiển thị sai địa điểm. Hoặc đau đầu hơn bạn cần phải cắt thật đúng đắn từng mẫu icon trong file giới thiệu về giao diện PSD mẫu ngoài ra chuyện này sẽ trở thành quá khứ vì bạn có thể thực hiện điều này một các dễ dàng & đơn giản hơn nhờ những thủ thuật khác. Vậy cần hiểu đúng đắn về Website Font Icon là gì & 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 nghe đế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 bút ký hiệu đúng đắn là những icons mà thường được sử dụng chèn trong các layout trong website.

Đọc thêm: Tại sao chúng ta 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,… vì thế bạn đơn giản sử dụng để mang & sử dụng & hiện tại nó đều tương thích với các HĐH thuộc máy tính & nó đều chạy được trên các HĐH 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 phù hợp với CSS3 để tạo thành những hiệu ứng icon chuẩn đẹp hơn. 

Hiện tại font này tương thích với đa phần các trình duyệt hiện tại ngoài ra với các phiên bản cũ IE7 thì nó không còn là sự bổ 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 đơn giản nhận biết được sự thiết yếu của việc sử dụng Font Awesome vì chúng phối hợp được với nhau khá tốt & có sự tương thích trên đa phần các phiên bản tại các trình duyệt hiện tại & chúng có sự phối hợp tốt với nhau tạo thành những hiệu ứng vô cùng dễ nhìn. 

Như thế hiểu dễ dàng là Font Awesome để chỉ một trong những bộ icon được kiến trúc dưới dạng Symbol Font tức là việc ám chỉ các font bút ký hiệu tương đương trong các software soạn thảo văn bản sau đó được chèn vào website dưới dạng font chữ thông qua các tính chất của CSS3 vì thế chỉ cần nhấn một lần bạn đã sở hữu thể sử dụng toàn bộ các hiệu ứng icon 

không chỉ thế các icon này được kiến trúc dưới dạng vector vì thế nó có thể hiển thị rõ nét dù bạn có phóng to như vậy nào đi nữa & một điều là bạn có thể đặt nó đơn giản ở bất kỳ đâu trên website & có thể biến đổi bất kỳ đâu trên trang cũng như màu sắc của nó chỉ với các tri thức về HTML & CSS hết sức căn bản.

Với hơn 600 icon dùng để bài trí trên website được tạo & lớn mạnh bởi chuyên viên lập trình Dave Gandy thì hầu hết các con icon mà bạn mong muốn sử dụng để bài trí đều được trổ tài bước này vì thế các sử dụng của nó thực sự dễ dàng & các bạn có thể tìm về home page của nó để tải về & chén vào website bằng việc tự thiết lập hay sử dụng theo các chỉ dẫn dưới đây:

Chỉ dẫn thiết lập Font Awesome

cài đặt Font Awesome

Trước tiên bạn cần phải nhúng tập tin CSS của font awesome vào trong website của các bạn & với thời điểm hiện thời bạn truy cập vào các phiên bản tiên tiến nhất tại các home page của font awesome để update thêm các phiên bản sử dụng tiên tiến nhất. Nếu bạn chẳng thể tự mình thực hiện, hãy liên hệ với công ty du học kiến trúc website của mình để được bổ trợ nhúng backlinks vào source code.

<backlinks 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, cảnh báo để tên của icon đó & lựa chọn icon để sử chẳng hạn với icon có tên là anchor ví dụ, để hiển thị trên trình duyệt website bạn có thể viết như sau: 

<ι class=”fa fa-anchor”></ivàgt;

không chỉ thế bạn cũng có thể biến đổ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 vì thế để biến đổ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 rất dễ dàng chẳng hạn như 

<ι class=”fa fa-anchor” style=”color: #2980b9;”></ivàgt;

Việc sử dụng font này thực sự dễ dàng & tiện dụng phải không nào. không chỉ thế bạn có thể tìm hiểu thêm về bảng đo đạc các icon thông qua địa chỉ website uy tín trên mxh hoặc bạn cũng có thể đọc qua thông qua bảng đo đạc qua các phần Example để thấy được sự lợi hại của bộ font này trong công cuộc tạo thành sự ấn tượng chuyên nghiệp cho website của các bạn & chắc rằng nó thực sự xứng đáng với tên gọi “awesome” phải không nào?

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

Như thế với thông tin phân phối trên hi vọng bạn có thêm tri thức cũng như sự lựa chọn để có thể tạo thành những hiệu ứng sinh động của những website. 

Xem Thêm  Mơ thấy người chết sống lại: Giải mã điềm báo & đánh con gì? - mơ thấy người chết sống lại

Viết một bình luận