Chia sẻ và giới thiệu cách dùng Font Awesome pro cho việc xây dựng website

Trong những bài trước mình có đề cập về font-face. Và bài này cũng vậy, duy chỉ khác ở chỗ là font-face nói trong bài này. Là để hiển thị các Icon hình ảnh dạnh vectơ. Chi tiết là nói về bộ Font Awesome pro (mình dc thằng bạn chia sẻ bản pro). Trong phạm vi bài viết này:

  • Giới thiệu bộ font awesome pro
  • Cách thức hoạt động và sử dụng font awesome pro như thế nào

Giới thiệu font awesome pro là gì ?

Như bạn biết, làm website thì không chỉ là dùng hình ảnh, mà bên cạnh đó còn có icon. Biểu tượng v.v.. mà làm một vài cái biểu tượng thì cũng mất nhiều thời gian. THôi ta đi cop cho nhanh. May thay có khá nhiều những công cụ mà ta có thể sử dụng để làm icon. Phổ biến nhất là font awesome một loại font-face làm icon rất nổi tiếng. Tại thời điểm bài ày viết, có chính xác 1409 icon, biểu tượng. Trong bộ thư viện font awesome, gần như đủ cho bạn làm mọi thứ. Bạn chỉ cần duy nhất bộ font tuyệt đẹp này cho website của mình.

bạn có 2 sự lựa chọn giữa font awesome miễn phí và bản trả phí. Tất nhiên là bản trả phí cũng có cách sử dụng như bản miễn phí. Nhưng hạn chế tính năng, tôi sẽ đem ra so sánh giữa bản free và bản mất tiền. Dưới là những điểm nổi bật của bản awesome pro: ( nên nhớ bản pro có đầy đủ các tính năng của bản miễn phí)

Có nhiều icon biểu tượng hơn bản free
Có thêm 3 dạng biểu tượng, thương hiệu
45 biểu tượng dc biến tấu đa rạng
Được lưu trên hệ thống CDN riêng tốc độ cao
được nhận hỗ trợ trực tuyến

Đó là một số ưu điểm, và mình cũng demo luôn một số biểu tượng của font awesome. Thực ra vì lười ko chịu tìm chứ tìm thì chắc cũng ra item phù hợp với nội dung bài. Cơ mà có là được rồi. Vậy nên nếu bạn muốn sử dụng mà ngon lành thì có thể mua bản pro nhé. VÌ chắc là bản mình share đây tách từ bản pro ra, nhưng chắc là ko pro đâu. VÌ còn thiếu nhiều tiện ích khác, mà thâm chí một số icon còn đéo thèm hiện cơ @@.

Cài đặt font awesome như thế nào ?

Đơn giản thôi, bạn chỉ cần copy và paste đoạn mã sau vào thẻ HEAD của website là được:

 Sử dụng font awesome ra sao?

Khác với font-face thì việc sử dụng font awesome lại phụ thuộc vào từng hoàn cảnh. Vì bạn có thể chèn font này vào bất cứ đâu hay bất kỳ vị trí nào. Miễn là nó hiển thị HTML được. vậy thì dùng font-awesome như sau:

Trước tiên bạn cần tìm xem là mình sẽ sử dụng icon nào? Bạn truy cập

Để tìm cho mình một icon hay biểu tượng ưng ý. Click chọn sang 1 trang mới, Sau đó lick chuột chọn đoạn mã

chọn đoạn mã của icon

Việc còn lại là dán vào chỗ mà bạn cần dán, Vậy là ok.

Tùy chọn thêm font awesome

Ngoài ra để đẹp và hấp dẫn hơn bạn có thể thêm các thẻ HTML cho phần icon thêm đẹp và phù hợp với nội dung hơn.
Ví dụ như sử dụng đoạn mã sau:

Se có kết quả là:



Hoặc có cách định dạng mạnh mẽ và đẹp đẽ hơn với các thẻ màu sắc và kích thước

và chúng ta có:









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