Cách dùng Font Awesome trên WordPress

Cách dùng Font Awesome trên WordPress

Khi vào một website, người dùng thường đánh giá, tập trung vào thiết kế hình ảnh không kém gì nội dung mà họ mong muốn sẽ tìm thấy ở website đó.

Thông thường, các nhà thiết kế và các nhà phát triển dùng hình ảnh/dải sprite riêng cho các icon (biểu tượng) của họ. Đồ họa kiểu này thường là một chuỗi các hình ảnh chính xác tới từng pixel, được sử dụng cho các phần cụ thể của trang (như là thanh tìm kiếm, điều hướng, màn hình đang tải, v.v.) Hiển thị icon bằng hình ảnh/sprite đã là lựa chọn hợp lý trong suốt một thời gian dài (và nhiều website vẫn tiếp tục sử dụng cách này). Tuy nhiên, với việc thiết kế responsive đang trở nên quan trọng hơn và được tập trung hướng đến hơn bao giờ hết, nó tạo ra một thách thức: làm sao để thiết kế được một bộ biểu tượng hoàn hảo cho bất kỳ thiết bị nào?

Font icon là gì?

Font icon là một cách giúp hiển thị các icon hoàn toàn có thể tùy chỉnh và đáp ứng linh hoạt trên website mà không cần sử dụng thêm hình ảnh hay dải sprite. Font icon, giống như tên gọi của nó, là một font chữ gồm chỉ toàn các icon.

Font Awesome Icon Examples

Trong khi một font bình thường có các ký tự như là ‘a’, ‘b’, ‘c’, font icon xác định ký tự bằng các biểu tượng, như biểu tượng tìm kiếm, biểu tượng menu, v.v. – tất cả có trong một font chữ.

Tại sao nên sử dụng font icon?

Trước kia, các hình ảnh truyền thống là đã đáp ứng đủ yêu cầu, nhưng font icon cung cấp sự linh hoạt tuyệt vời hơn nhiều, cho phép ta dễ dàng quản lý các icon, đơn giản và với tính đáp ứng linh hoạt.

Font icon: đáp ứng linh hoạt hoàn toàn

  • Những icon này gồm các véc-tơ có thể thu phóng theo bất kỳ tỉ lệ nào mà vẫn giữ nguyên được chất lượng hình ảnh.
  • Hình ảnh truyền thống là các hình ảnh dựa trên đồ họa raster, được tạo ra ở một kích thước cố định (thường là dạng lưới, như là 48×48). Hình ảnh kiểu này trông sẽ rất tệ khi bị thay đổi kích thước hay phải hiển thị trên một thiết bị với độ phân giải cao.

Font icon: dễ dàng định dạng, định vị và thao tác

  • Thao tác với font icon cũng giống hệt như với các font thông thường khác: bạn có thể đặt màu icon, màu nền, căn chỉnh, cách dòng, v.v. và các định dạng font khác với CSS.
  • Khá khó để thao tác tốt với hình ảnh truyền thống. Nếu bạn muốn điều chỉnh dù chỉ một chút về màu sắc hay kích thước, bạn vẫn sẽ phải upload một hình ảnh hoàn toàn mới.

Font icon: đa trình duyệt và luôn có sẵn

  • Font icon có khả năng tương thích cao, kể cả với các trình duyệt đã cũ.
  • Có hàng tá những font tuyệt vời mà các nhà thiết kế đã dành hàng giờ để tạo ra, được cập nhật và cải tiến thường xuyên để mang đến trải nghiệm tốt nhất.Font Awesome Example

Với tất cả những font icon tuyệt vời và miễn phí có sẵn, chẳng có lý do gì bạn phải dùng các icon từ hình ảnh truyền thống nữa. Tuy nhiên, font icon vẫn còn tồn tại một số nhược điểm gây tranh cãi:

  • Sự khác biệt trình duyệt và hệ điều hành – Vì đây là font chữ, nên nó phụ thuộc vào cách từng trình duyệt kết xuất (render) các icon (sẽ có một chút thay đổi giữa các hệ điều hành, trình duyệt, và thậm chí là các phiên bản khác nhau của cùng một trình duyệt). Ngược lại, hình ảnh truyền thống thì không như thế.
  • Không phải bất cứ icon nào cũng có sẵn. Mặc dù các nhà thiết kế đã tạo ra hầu hết các icon cần cho một dự án cơ bản. Trong một số trường hợp, bạn vẫn sẽ phải dựa vào các hình ảnh truyền thống.

Dùng Font Awesome trong các trường hợp

Dùng Font Awesome cho dự án WordPress

Font Awesome có trong hàng ngàn các dự án trên Internet, trong đó bao gồm cả theme (chủ đề) của WordPress (ví dụ như Base Theme của SitePoint) và các plugin. Tích hợp Font Awesome với theme hay plugin của WordPress là một việc vô cùng đơn giản và chỉ cần vài bước để hoàn thành. Có hàng tá các font bạn có thể sử dụng, nhưng bài hướng dẫn sau sẽ dùng Font Awesome bản 5.4.

Dùng Font Awesome bản có sẵn hoặc bên ngoài

Có hai lựa chọn chính để bạn dùng Font Awesome trong dự án: bạn có thể tải file ngay trên máy chủ web, hoặc liên kết với tệp định dạng bên ngoài trên CDN.

Tải về Font Awesome và thêm các font/CSS thủ công

Nhấp vào link tải về trên trang chủ Font Awesome để tải file zip. Trong file zip này, bạn sẽ thấy các font và file CSS cần thiết. File zip này sẽ có các tài nguyên cần phải chuyển qua dự án của bạn (đưa chúng vào các thư mục ứng dụng riêng qua FTP). Tạo một mục trong theme hoặc plugin, gọi là ‘fonts’, và một mục khác gọi là ‘css’, rồi chuyển file vào các mục này. Vào functions.php của theme và tạo một hàm mới dùng để tải tệp định dạng. Tạo một hàm và đính kèm vào wp_enqueue_scripts. Một khi đã có hàm này, chạy wp_enqueue_scripts và tải tệp định dạng.

//enqueues our locally supplied font awesome stylesheet

function enqueue_our_required_stylesheets()

{wp_enqueue_style(‘font-awesome’, get_stylesheet_directory_uri() . ‘/css/font-awesome.css’);}

add_action(‘wp_enqueue_scripts’,’enqueue_our_required_stylesheets’);

Liên kết với CDN được lưu trữ

Liên kết với CDN bên thứ ba giúp đơn giản hóa quá trình đi rất nhiều. Tất cả những gì bạn cần làm là tạo một hàm trong functions.php và đính kèm hàm đó vào wp_enqueue_scripts. Trong hàm này, thêm tệp định dạng như sau:

//enqueues our external font awesome stylesheet

function enqueue_our_required_stylesheets()

{wp_enqueue_style(‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/5.4.0/css/font-awesome.min.css’);}

add_action(‘wp_enqueue_scripts’,’enqueue_our_required_stylesheets’);

Cách dùng Font Awesome (và font icon nói chung)

Font Awesome có thể được dùng theo hai cách, tùy theo ý thích và nhu cầu của dự án.

Phần tử giả (phương thức CSS)

Dùng phương thức giả để thêm icon nghĩa là dùng bộ chọn CSS giả :before hoặc :after để định dạng phần tử HTML bạn cần. Bạn phải quyết định xem đâu là phần tử cần áp dụng icon và tạo một định dạng CSS trước hoặc sau phần tử đó, rồi chọn thủ công icon sẽ được dùng (cùng với định dạng và thiết kế của nó).

Mỗi font trong bộ font icon có một code duy nhất đại diện cho icon, chính là Unicode. Nó báo cho trình duyệt rằng bạn muốn hiển thị ký tự tương ứng với code này. Bạn phải tạo phần tử giả dùng bộ font icon của bạn, rồi mới đến content (nội dung) của nó. Cần đặt các thuộc tính content và font-family với giá trị tương ứng của chúng để xuất hiện phần tử giả.

Ví dụ: Nút lệnh

Settings Menu

Ta được kết quả:

Font Awesome Button Example

Ta dùng Unicode để hiển thị icon nhiều bánh răng. Mỗi trang Font Awesome sẽ hiển thị mã Unicode cần được thêm vào, trong ví dụ này là \f085, như được chỉ ra trên trang mẫu.

Ưu điểm

  • Thiết kế sẽ chi tiết và cụ thể: bạn có thể đặt kích thước, màu sắc, kiểu dáng, cách dòng chính xác theo cách mà bạn muốn
  • Bạn không cần thêm phần tử HTML chỉ để tạo một biểu tượng (có thể áp dụng nó trực tiếp lên một phần tử khác như H1 hoặc div rồi đặt nó quanh phần tử).

Nhược điểm

  • Cần thiết lập thủ công mọi thứ (không thể chỉ dùng một lớp Font Awesome định trước để phóng to, xoay, hay các thay đổi khác)
  • Khó định vị với JavaScript/jQuery (khi bạn đang dùng phương thức CSS với một phần tử, bạn không thể định vị phần tử đó để thay icon, vì bạn không thể định vị phần tử giả)
  • Nếu Font Awesome cập nhật tham chiếu Unicode, hoặc bạn cập nhật tệp định dạng, bạn có thể sẽ phải nhập lại các giá trị của Unicode.

Phần tử nội tuyến (phương thức HTML)

Cách đơn giản nhất để dùng Font Awesome là gán các lớp Font Awesome cho phần tử. Khi dùng font icon theo cách này, nó sẽ tạo một phần tử giả trước/sau phần tử được nhắm đến và tạo định dạng cho icon. Nếu muốn hiển thị một icon, bạn phải gán lớp fa cho một item (thường thì phần tử như i và span là tốt nhất). Lớp này kết nối item và font của Font Awesome.

Khi item đã có nền tảng là lớp fa, thêm tên lớp tương ứng với icon bạn muốn hiển thị. Ví dụ, nếu bạn muốn hiển thị icon máy ảnh, thêm lớp fa-camera-retro. Khi lớp tương ứng đã được chọn, font icon sẽ đối chiếu để hiển thị ký tự Unicode của nó (glyph). Và kết xuất (render) được kết quả sau:

Font Icon Example of Camera

Khi đã kết xuất được icon, bạn có thể tạo các phần tử phức tạp hơn bằng cách thêm các lớp Font Awesome cho kích thước, hướng xoay, kiểu dáng và màu sắc.

Ví dụ: Menu điều hướng

Bạn có thể xây dựng một menu điều hướng đơn giản với các lớp Font Awesome định sẵn:

/*Base styles for a drop down*/

.nav-list .nav-item{

display: block;

}

.nav-item .nav-link:first-child{

border-top: solid 1px #ccc;

}

.nav-item .nav-link{

display: block;

padding: 8px 12px;

background: #eee;

border: solid 1px #ccc;

border-top: 0px;

color: #333;

}

.nav-link > i {

margin-right: 10px;

}

Và tạo được một menu điều hướng dọc như sau:

Vertical Font Awesome Navigation

Ví dụ: Icon xếp chồng

Bạn cũng có thể xếp chồng các icon để tạo sự khác lạ. Ví dụ, với một vài biểu tượng mạng xã hội:

.social-bar {

text-align: center;

}

.social-bar .header{

display: inline-block;

margin: 0px 7px 0px 0px;

border-bottom: solid 1px;

font-size: 110%;

}

/*holds the front and back icons*/

.social-bar .icon{

display: inline-block;

}

/*back (square) of the stack*/

.social-bar .icon > .back{

background: #333;

}

/*Front (icon) of the stack*/

.social-bar .icon > .front{

color: #fff;

}

Font Awesome Stack Example

Bạn có thể xếp chồng icon bằng cách thêm các icon quanh một phần tử khác rồi áp dụng lớp fa-stack. Các icon bạn muốn xếp chồng cũng phải dùng lớp fa-stack. Có thể cụ thể hóa kích thước bạn cần bằng cách dùng các lớp kích thước như fa-stack-1x và fa-stack-2x để xếp chúng được chính xác.

Ưu điểm

  • Đơn giản, dễ dàng sử dụng. Áp dụng lớp Font Awesome, và bạn sẽ có ngay icon bạn cần
  • Định vị được phần tử với JavaScript/jQuery, cũng có nghĩa bạn có thể thêm bớt các lớp để thay đổi icon được hiển thị
  • Có thể thao tác theo nhiều cách, gồm xếp chồng, tạo hình động, thu phóng, định vị. Tất cả đều đã được thử nghiệm để đảm bảo sẽ hoạt động tốt trên nhiều trình duyệt (bạn không cần phải đau đầu tự thử nghiệm nữa)
  • Hiển thị trực quan trong HTML sẽ cho thấy icon đang dùng (các phần tử giả có thể bị bỏ qua nếu chúng chỉ được xác định trong CSS).

Nhược điểm

  • Nếu bạn yêu cầu sự kiểm soát tinh vi hơn, bạn cần áp dụng định dạng bổ sung/ghi đè các lớp Font Awesome.

Kết luận

Giờ thì bạn đã biết các nguyên tắc cơ bản để ứng dụng font icon trong dự án của mình rồi đấy! Hãy sẵn sàng để thay thế các icon kiểu cũ bằng phát kiến mới tuyệt vời này thôi!