Hướng Dẫn Toàn Tập Cài Đặt và Sử Dụng Font Awesome cho WordPress

Khi đứng trước lựa chọn giữa việc sử dụng một icon vector hay một hình ảnh tĩnh, lựa chọn vector luôn là một ý tưởng tuyệt vời. Chúng có dung lượng nhỏ, tải nhanh và có thể thay đổi kích thước bất kỳ mà không làm giảm độ phân giải. Font Awesome là một thư viện icon vector siêu hạng mà bạn có thể sử dụng cho website của mình, và có lẽ nó chứa đựng gần như mọi hình dạng hoặc logo thương hiệu mà bạn cần.

Và điều tuyệt vời nhất là gì? Nó hoàn toàn miễn phí. Điều tuyệt vời thứ hai? Nó cực kỳ dễ sử dụng.

Tổng Quan Về Icon Font Awesome trên WordPress

Việc sử dụng thư viện Font Awesome trên trang WordPress của bạn tương đối đơn giản. Một khi bạn làm theo các bước đơn giản này, bạn sẽ có thể giảm thời gian tải trang và tạo ra những thiết kế thực sự gọn gàng, sắc nét bằng cách sử dụng các icon này như một phần trong công việc của mình.

Một điều cần nhớ là (trong hầu hết các trường hợp) các icon Font Awesome sẽ được chuyển đến trang web của bạn dưới dạng font chữ thực sự. Đó cũng là lý do cho cái tên Font Awesome (Font Tuyệt Vời). Bạn sẽ có thể tạo kiểu và tùy chỉnh chúng theo mọi cách mà bạn thường làm với một ký tự font, sử dụng CSS thông qua @font-face và font-family của Font Awesome.

Nhờ đó, bạn sẽ không phải lo lắng về việc định cỡ hoặc khoảng cách cho từng trình duyệt hoặc khung nhìn (viewport) riêng lẻ. Nếu nghe có vẻ tuyệt vời, thì đúng là như vậy. Và đây là cách để bạn thực hiện:

Cách 1: Cài Đặt Font Awesome Bằng Plugin (Khuyên Dùng)

Mặc dù có một cách thủ công để cài đặt và sử dụng Font Awesome, nhưng có một cách tốt hơn cho người dùng WordPress. Những người tuyệt vời ở FA đã phát hành một plugin Font Awesome chính thức cho WordPress, và nó hoạt động cực kỳ đẹp mắt.

Với plugin đã được cài đặt và kích hoạt, bạn giờ đây có quyền truy cập vào shortcode [[icon name]] cũng như các đoạn mã HTML. Miễn là bạn giữ bên mình danh sách icon tiện dụng của FA để biết chính xác icon bạn cần là gì. Bạn sẽ thấy trên trang cài đặt của plugin (tìm thấy trong Settings – Font Awesome) cách mọi thứ được thiết lập theo mặc định. Nhìn chung, giữ nguyên các thiết lập này là ổn. Hầu hết mọi người sẽ không cần gì khác.

Tùy chọn Method (Phương thức) có lẽ là quan trọng nhất đối với hầu hết mọi người. Bạn có thể chuyển đổi giữa Webfont hoặc SVG. Mặc dù SVG cung cấp cho bạn nhiều sức mạnh và tính năng hơn (chẳng hạn như biến đổi mạnh mẽ và tạo mặt nạ), CDN của Font Awesome sẽ phân phối các icon dưới dạng tệp SVG chứ không phải là một font chữ. Mặc dù điều đó tốt hơn ở một số khía cạnh, SVG lại không được nhiều trình duyệt nhận dạng, và WordPress cũng không phải lúc nào cũng “chơi đẹp” với hình ảnh SVG. Vì vậy, chúng tôi đề nghị bạn nên chơi an toàn với phiên bản webfont.

Chính Font Awesome cũng nói như vậy:

Nếu bạn không chắc chắn về sự khác biệt, hoặc không biết tại sao bạn lại cần sử dụng SVG, thì việc gắn bó với phương thức webfont mặc định có lẽ là dễ dàng nhất.

Để sử dụng các icon Font Awesome trên trang WordPress của bạn, việc này rất đơn giản. Chỉ cần thêm <i class="fab fa-wordpress"></i> vào bất kỳ đâu bạn muốn một icon xuất hiện. Hãy chắc chắn kiểm tra thư viện icon để biết tên cần điền vào.

Lưu ý: các shortcode trong plugin hoạt động không ổn định (hit-and-miss). Một số icon hiển thị hoàn hảo, trong khi những icon khác lại trống trơn. Chúng tôi khuyên bạn nên gắn bó với việc chèn HTML trừ khi bạn thấy shortcode hoạt động với mình. Xem ví dụ bên dưới về việc ví dụ WordPress ở trên không hiển thị, trong khi icon máy ảnh thì có.

Và bạn đã hoàn tất. Plugin Font Awesome cho WordPress rất tuyệt vời cho những người không thoải mái khi đi sâu vào theme hoặc các tệp của họ để chèn đoạn mã cần thiết. Tuy nhiên, nếu bạn thoải mái làm điều đó, bạn có thể làm theo các hướng dẫn sau để đưa các icon Font Awesome lên trang của mình.

Cách 2: Cài Đặt Icon Font Awesome Thủ Công

Việc đầu tiên bạn cần làm là truy cập vào trang web của Font Awesome. Từ đó, nhấp vào nút Start Using Free. Họ có cung cấp các gói trả phí cho những người có trang web lưu lượng truy cập cao và cần một giải pháp doanh nghiệp, nhưng người dùng thông thường có thể sử dụng phiên bản miễn phí. Bạn nhận được 1.500 icon miễn phí và hơn 5.000 biến thể trong gói Pro.

Bước tiếp theo chỉ đơn giản là sao chép/dán. Nhưng bạn sẽ muốn đảm bảo rằng bạn đã chọn tùy chọn webfont, giống như chúng ta đã thảo luận trước đó.

Hầu hết các theme đều có một nơi để bạn chèn mã vào thẻ <head> của trang web một cách tự động. Ví dụ, trong trường hợp của theme Divi, bạn sẽ vào Theme Options – Integrations và dán đoạn mã này vào trường có nhãn Add code to the Head of your blog.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Khi bạn nhấn lưu, bạn có thể bắt đầu chèn bất kỳ icon nào bạn muốn, giống như chúng ta đã làm ở trên. Chỉ có điều, bạn không có quyền truy cập vào shortcode bằng cách này.

Nếu Theme Của Bạn Không Hỗ Trợ Tích Hợp Code

Nếu bạn không thể tìm thấy một vị trí như thế này trong theme của mình, việc thực hiện thủ công cũng dễ dàng không kém. Tuy nhiên, bạn sẽ phải đào sâu vào các tệp lõi (Core files) của theme để làm điều đó, nhưng đây là một thao tác sao chép/dán rất nhanh và (nhìn chung) khá an toàn. Đi đến Appearance – Editor trong bảng điều khiển WP của bạn và tìm tệp header.php.

Tìm dòng có thẻ </head> và trước nó, bạn cần dán cùng một đoạn mã từ Font Awesome. Nhấn Update File, và bạn sẽ có thể bắt đầu sử dụng các icon FA ngay lập tức. Một lần nữa, bạn không nhận được shortcode bằng cách cài đặt Font Awesome theo cách này.

 

Ngoài ra, hãy nhớ rằng bất cứ khi nào bạn chỉnh sửa một tệp theme, bạn nên sử dụng một child theme (theme con). Bằng cách đó, bạn ngăn không cho những thay đổi bạn đã thực hiện bị ghi đè khi theme được cập nhật.

Các Tùy Chọn Cài Đặt Khác

Và nếu bạn có những nhu cầu khác, cụ thể hơn cho Font Awesome, họ có cung cấp một loạt các cách để truy cập vào thư viện. Từ các bản cài đặt NPM và Yarn, đến tích hợp Sketch và React, họ có rất nhiều tùy chọn nếu bạn cần nó cho nhiều thứ hơn là chỉ WordPress.

Tùy Chỉnh Kiểu Dáng (Styling) Cho Icon Font Awesome

Bây giờ bạn đã cài đặt chúng, đã đến lúc làm cho các icon trở nên nổi bật. Bạn có thể làm điều này bằng cách sử dụng CSS vì mỗi icon được điều khiển bởi một lớp (class) CSS. Hai kiểu được sử dụng thường xuyên nhất là màu sắc (color) và kích thước (size). Bạn có thể đưa kiểu dáng CSS vào các tệp stylesheet của mình, hoặc bạn có thể làm điều đó ngay tại chỗ (inline). Nhìn chung, bạn có thể muốn sử dụng kiểu dáng inline vì các icon như thế này không có xu hướng được áp dụng đồng nhất trên toàn bộ trang web.

Trang web của Font Awesome có các ví dụ về cách thực hiện điều này. Họ hiển thị việc định cỡ bằng cách sử dụng icon lều tuyết (igloo) của họ và các lớp bổ sung như fa-xs hoặc fa-xl hoặc fa-2x cho kích thước cụ thể.

Ngoài ra, nếu bạn cần icon có kích thước tương đối so với một kích thước cụ thể và các giá trị tuyệt đối không hoạt động, bạn có thể đặt nó trong một thẻ <div> riêng để làm cho nó hoạt động trong các ràng buộc của bạn.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Lời Kết

Và đó là tất cả! Tuyệt vời, phải không? Dù bạn đang sử dụng plugin Font Awesome cho WordPress hay chèn mã thủ công, cũng không mất quá vài bước để trang web của bạn được thiết lập và hoạt động. Font Awesome nổi tiếng vì một lý do, và một phần trong đó đến từ sự dễ sử dụng của nó. Vì vậy, hãy bắt đầu và trở nên “awesome”!

Cách yêu thích của bạn để sử dụng icon Font Awesome là gì?