Bài trước Puramu đã hướng dẫn bạn cách chèn Font Awesome Icons vào Photoshop rồi. Hôm nay, chúng ta sẽ tìm hiểu thêm cách chèn icon trong Font Awesome vào WordPress sẽ như thế nào nhé!
Font Awesome là gì?
Font Awesome chứa thư viện font chữ ký hiệu (icon) được nhiều người ưa chuộng nhất hiện nay. Với hơn 19.000 icon đa dạng, phong phú phục vụ cho các designer, lập trình viên, người sáng tạo nội dung.
Font Awesome chứa nhiều định dạng file font khác nhau như: svg, otf, ttf, eot, woff,… Vì thế, nó có thể hoạt động trơn tru trên hầu hết các hệ điều hành máy tính, các phần mềm và cả trang web. Thêm vào đó, Font Awesome cũng cho phép người dùng dễ dàng thay đổi kích thước và màu sắc của icon giúp quá trình sử dụng thuận tiện hơn.
Ưu điểm khi sử dụng Font Awesome
Thông thường, để sử dụng các icon, phải tìm kiếm hoặc thiết kế các hình ảnh dạng PNG hoặc SVG. Việc tìm kiếm này mất khá nhiều thời gian. Thêm vào đó, việc sử dụng quá nhiều icon dạng hình ảnh còn khiến tốc độ website chậm do tốn nhiều tài nguyên tải và lưu trữ.
Dùng icon dạng font chữ trong Font Awesome giúp bạn:
- Tiết kiệm thời gian hơn.
- Các icon trên website được đồng bộ về style, kiểu dáng hơn so với việc bạn tìm kiếm, lượm nhặt ở bên ngoài.
- Có thể thay đổi màu sắc, kích thước thông qua các câu lệnh CSS.
- Tương thích mọi thiết bị, trình duyệt: Các icon hiển thị tốt trên mọi màn hình, thiết bị hay bất kể các trình duyệt nào.
- Các phiên bản được cập nhật thường xuyên.
- Số lượng icon càng ngày càng tăng nên sẽ rất hiếm xảy ra việc bạn không tìm được icon bạn cần.
- Miễn phí. Font Awesome có cả phiên bản Pro trả phí nhưng theo Puramu thì bản Free đã đủ nhu cầu sử dụng rồi.
Hướng dẫn thêm Font Awesome vào WordPress
Cách 1: Thêm Font Awesome vào WordPress bằng cách upload lên hosting
Bước 1: Tải Font Awesome
Đầu tiên, bạn cần tải Font Awesome Free về máy:
- Truy cập trang web Font Awesome, sau đó lướt xuống bạn sẽ thấy mục Download (như trong hình). Nhấp vào Download để tải về máy.
Nhấp vào download. Bạn sẽ thấy một loạt các phiên bản của Font Awesome bản Pro và Free trên Desktop và Web. Trong hướng dẫn này, chúng ta sẽ sử dụng Font Awesome trong WordPress nên Puramu chọn tải bản Free trên Web. Tại thời điểm viết bài này phiên bản mới nhất của Font Awesome là 6.2.1.
- Sau khi tải về máy bạn giải nén tệp đã tải xuống trên ổ cứng. Bạn sẽ thấy các thư mục như hình dưới. Chúng ta chỉ quan tâm hai thư mục tô đậm bên dưới là
cssvàwebfonts.
Bước 2: Thêm Font Awesome vào WordPress
Khi đã tải và giải nén Font Awesome xong thì chúng ta tải nó lên hosting để sử dụng:
Truy cập vào VPS hay Hosting của bạn, vào thư mục theme mà bạn đang sử dụng, tạo cho mình thư mục có tên là fontawesome. Sau đó, tải 2 thư mục bên trên vào thư mục vừa tạo.
Tiếp đó, sao chép đoạn code bên dưới dán vào file functions.php trong thư mục theme mà bạn đang sử dụng. Mục đích là để gọi Font Awesome đã chứa sẵn trên Hosting. Bạn lưu lại là xong.
<?php
// Thêm Font Awesome 6.2.1 vào theme
function puramu_load_fa() {
wp_enqueue_style( 'puramu-fa', get_stylesheet_directory_uri() . '/fontawesome/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'puramu_load_fa' );Bước 3: Tìm icon trong Font Awesome Free
Vào Thư viện Icons trong Font Awesome, nhấp vào thanh tìm kiếm để gõ tên icon cần sử dụng. Lưu ý là bạn phải nhập tên icon bằng tiếng anh nhé. Ví dụ trong hình là Puramu đang tìm icon Car (xe hơi).
Nếu bạn chưa xác định được icon nào mình cần, bạn có thể lướt xuống và khám phá các icon trong thư viện Font Awesome.
Sau khi đã chọn được icon yêu thích, bạn nhấp chuột vào icon. Một cửa sổ nhỏ mới sẽ được bật lên. Bạn bôi đen phần code html như hình dưới, icon sẽ tự động được sao chép.
Bước 4: Thêm icon Font Awesome vào bài viết và trang
Dán mã HTML trên vào vị trí mà bạn muốn đặt trên website.
Trong bài viết, nếu bạn muốn sử dụng đoạn mã HTML này, thì cần chuyển trình soạn thảo qua dạng xem HTML rồi dán vào.
Sau đó, nhấp chuột vào Preview -> Preview in new tab. Bạn xem bài viết xem trước đã hiển thị đúng như bạn mong muốn chưa? cần chỉnh sửa kích thước, màu sắc gì không? Khi đã ưng ý rồi, bạn lưu lại là xong.
Để thay đổi màu sắc và kích thước icon, thì bạn sử dụng thẻ style với các thông số color, font-size, như việc thiết lập cho các font chữ khác (xem hướng dẫn tại https://fontawesome.com/v6/docs/web/style/size).
Cách 2: Thêm Font Awesome vào WordPress bằng Plugin
Nếu bạn ngại đụng đến code thì cách này sẽ nhanh, gọn, phù hợp với bạn. Plugin cho phép chèn Font Awesome vào WordPress dễ dàng, hỗ trợ cả shortcode nữa. Vì thế, bạn có thể chèn icon vào trong bài viết nhanh chóng. Plugin còn tự động sử dụng phiên bản mới nhất của Font Awesome đảm bảo icon luôn được cập nhật liên tục.
Hiện nay có rất nhiều plugin để sử dụng Font Awesome. Nhưng Puramu sẽ chọn và hướng dẫn bạn về plugin Font Awesome thôi. Vì đây plugin chính thức do Font Awesome phát triển nên đảm bảo tính bảo mật, cập nhật dài lâu, an toàn cho website của chúng ta nhất có thể.
Bước 1: Cài đặt và kích hoạt plugin
Bước này khá đơn giản. Nếu bạn chưa biết cách cài Plugin WordPress thì tham khảo bài này nhé!
Bước 2: Thêm icon Font Awesome vào bài viết và trang
Sau khi kích hoạt plugin, vào trình chỉnh sửa bài viết hoặc trang bất kì bạn sẽ thấy nút Font Awesome Icon trên thanh công cụ (bao gồm cả Block Editor và Classic Editor).
Nhấp vào nút Font Awesome Icon, một ô tìm kiếm icon sẽ hiện lên. Nhập tên icon bạn muốn sử dụng trên thanh tìm kiếm (lưu ý phải sử dụng tiếng anh nhé).
Nhấp vào icon bạn ưng ý, shortcode sẽ tự động sinh ra và chèn vào vị trí con trỏ trong WordPress Editor.
Ngoài ra bạn cũng có thể chèn icon từ Font Awesome vào bất cứ đâu trên website như menu, footer,.. bằng cách tìm kiếm tên icon và sử dụng shortcode mà plugin Font Awesome cung cấp.
[icon name="car"]
[icon name="car" prefix="fal"]Không những thế bạn vẫn có thể chèn bằng HTML như trong hướng dẫn tại bước 3 & 4 của cách 1 ở trên.
Trên đây là hai cách thêm Font Awesome vào WordPress đơn giản, hiệu quả, hạn chế rủi ro cho website bạn nhất. Nếu bạn còn thắc mắc hay cần tư vấn về dịch vụ thiết kế website, đừng ngần ngại liên hệ Puramu qua hotline 039.395.0385 hoặc để lại yêu cầu tư vấn bên dưới. Chúc bạn thành công!
