NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
14/08/2023
Lượt xem

2 cách thêm icon font vào theme WordPress

14/08/2023
15 phút đọc
Lượt xem

Đánh giá

5/5 - (53 bình chọn)

Thêm icon font vào theme WordPress là cách tăng tính thẫm mỹ và trải nghiệm người dùng cho trang web. Bằng cách sử dụng icon font này sẽ giúp tối ưu hóa tốc độ tải trang và cải thiện giao diện người dùng. Để hiểu rõ hơn vấn đề này, hãy cùng Vietnix tham khảo qua nội dung bài viết sau đây.

Icon font là gì

Icon font chứa các biểu tượng hoặc hình ảnh nhỏ thay vì chữ và số. Bạn có thể sử dụng các icon font này trong nhiều cách khác nhau.

Icon font là gì
Icon font là gì

Ví dụ, bạn có thể sử dụng chúng trong giỏ hàng của mình, download button, các feature box, giveaway contest, và thậm chí navigation menu trong WordPress.

Thực tế, WordPress còn sử dụng icon font trong khu vực dashboard.

Sử dụng icon font trong khu vực dashboard
Sử dụng icon font trong khu vực dashboard

Hầu hết khách hàng khi truy cập sẽ ngay lập tức hiểu ý nghĩa của icon được sử dụng, giúp họ dễ dàng tương tác với trang web của bạn. Chúng cũng có thể giúp bạn tạo một trang web đa ngôn ngữ, vì hầu hết mọi người sẽ hiểu icon font thông dụng bất kể họ đang dùng ngôn ngữ gì.

So với các icon dựa trên hình ảnh, icon font tải nhanh hơn nhiều và giúp cải thiện tốc độ và hiệu suất của WordPress. Có một số icon font mã nguồn mở mà bạn có thể sử dụng miễn phí, nhưng trong hướng dẫn này sẽ sử dụng Font Awesome vì đây là bộ icon mã nguồn mở phổ biến nhất.

2 cách thêm icon font vào theme WordPress

1. Cách thêm icon font vào theme WordPress bằng plugin Font Awesome

Cách đơn giản nhất để thêm icon font vào WordPress là sử dụng Font Awesome. Plugin này cho phép bạn sử dụng icon font trong các trang và bài viết mà không cần chỉnh sửa các file theme WordPress của bạn. Bạn cũng sẽ tự động nhận được bất kỳ icon Font Awesome mới mỗi khi bạn cập nhật plugin.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Font Awesome. Để biết thêm chi tiết,bạn có thể tham khảo bài viết sau đây:

Sau khi kích hoạt, bạn có thể thêm một icon Font Awesome vào bất kỳ shortcode block nào. Chỉ cần mở trang hoặc bài viết nơi bạn muốn hiển thị icon font, sau đó nhấp vào icon “+“.

Bây giờ bạn có thể tìm kiếm Shortcode và chọn block đúng khi nó xuất hiện.

Tìm kiếm Shortcode và chọn block
Tìm kiếm Shortcode và chọn block

Với việc đó hoàn thành, bạn có thể thêm bất kỳ icon Font Awesome nào bằng cách sử dụng shortcode sau:

	
[icon name="rocket"]

Chỉ cần thay thế “rocket” bằng tên của icon mà bạn muốn hiển thị. Để lấy tên, hãy truy cập trang web Font Awesome và nhấp vào icon mà bạn muốn sử dụng.

Thay thế rocket bằng tên của icon mà bạn muốn hiển thị
Thay thế “rocket” bằng tên của icon mà bạn muốn hiển thị

Trong pop up, hãy nhấp vào tên của icon. Font Awesome bây giờ sẽ tự động sao chép tên vào bộ nhớ tạm.

Nhấp vào tên của icon Font Awesome sẽ tự động sao chép tên vào bộ nhớ tạm
Nhấp vào tên của icon Font Awesome sẽ tự động sao chép tên vào bộ nhớ tạm

Sau khi hoàn thành, chỉ cần dán tên vào trong shortcode. Bây giờ bạn có thể nhấp vào Publish hoặc Update để hiển thị icon font trực tiếp.

Đôi khi bạn có thể hiển thị một icon font bên trong một block văn bản.

Ví dụ, bạn có thể cần hiển thị icon copyright sau tên thương hiệu.

Để thực hiện điều này, chỉ cần dán shortcode vào bất kỳ Paragraph block nào.

Dán shortcode vào bất kỳ Paragraph block
Dán shortcode vào bất kỳ Paragraph block

Sau đó, bạn có thể sử dụng các cài đặt trong menu bên tay phải để tùy chỉnh icon, tương tự như cách bạn tùy chỉnh các tùy chọn cho block văn bản.

Ví dụ, bạn có thể thay đổi kích thước phông chữ và màu nền trong WordPress.

WordPress sẽ chuyển shortcode thành một icon Font Awesome và hiển thị cùng với văn bản của bạn.

WordPress sẽ chuyển shortcode thành một icon Font Awesome
WordPress sẽ chuyển shortcode thành một icon Font Awesome

Một lựa chọn khác là thêm shortcode vào bất kỳ khu vực có thể thêm widget nào.

Ví dụ, bạn có thể thêm một Shortcode block vào sidebar hoặc phần tương tự trên trang web.

Thêm một Shortcode block vào sidebar
Thêm một Shortcode block vào sidebar

Bạn còn có thể thêm icon shortcode vào các cột và tạo các feature box đẹp mắt.

Có thể thêm icon shortcode vào các cột và tạo các feature box
Có thể thêm icon shortcode vào các cột và tạo các feature box

Nhiều trang web sử dụng icon font trong menu của họ để giúp khách truy cập dễ dàng điều hướng. Để thêm một icon, bạn có thể tạo một menu mới hoặc mở một menu hiện có trong WordPress dashboard.

Trên trang Appearance > Menus, nhấp vào Screen Options và sau đó đánh dấu vào hộp bên cạnh CSS Classes.

Trên trang Appearance chọn Menus sau đó nhấp vào Screen Options
Trên trang Appearance chọn Menus sau đó nhấp vào Screen Options

Khi đã làm xong, chỉ cần nhấp để mở rộng mục menu nơi bạn muốn hiển thị icon. Bây giờ bạn sẽ thấy một field CSS Classes mới.

Field CSS Classes mới
Field CSS Classes mới

Để lấy lớp CSS của một icon, chỉ cần tìm icon font trên trang web Font Awesome và nhấp vào. Bạn có thể thay đổi kiểu dáng của icon bằng cách nhấp vào các thiết lập khác nhau.

Trong pop up, bạn sẽ thấy một đoạn code HTML. Lớp CSS chính là văn bản nằm giữa dấu ngoặc kép.

Ví dụ, trong hình ảnh dưới đây, lớp CSS là fa-solid fa-address-book.

Lớp CSS
Lớp CSS

Chỉ cần sao chép văn bản nằm trong dấu ngoặc kép, sau đó quay lại WordPress dashboard. Bây giờ bạn có thể dán văn bản vào field CSS Classes.

Có thể dán văn bản vào field CSS Classes
Có thể dán văn bản vào field CSS Classes

Để thêm nhiều icon font hơn, chỉ cần làm theo cùng quy trình đã mô tả ở trên.

Khi bạn hài lòng với cách thiết lập menu, hãy nhấp vào Save. Bây giờ nếu bạn truy cập trang web WordPress của mình, bạn sẽ thấy navigation menu đã được cập nhật.

Navigation menu đã được cập nhật khi bạn truy cập trang web
Navigation menu đã được cập nhật khi bạn truy cập trang web

Nếu bạn chưa biết cách tạo shortcode, có thể tham khảo bài viết sau:

2. Cách thêm icon font vào theme WordPress với SeedProd

Nếu bạn muốn tự do sử dụng icon font bất kỳ nơi nào trên trang web của mình, thì Vietnix khuyên bạn nên sử dụng một plugin page builder.

SeedProd là plugin page builder WordPress dựa trên kéo và thả tốt nhất trên thị trường và có hơn 1400 icon Font Awesome tích hợp sẵn. Plugin này cũng có một icon block sẵn có mà bạn có thể thêm vào bất kỳ trang nào bằng cách kéo và thả.

Với SeedProd, bạn dễ dàng tạo các trang tùy chỉnh trong WordPress và sau đó hiển thị icon Font Awesome ở bất kỳ nơi nào trên các trang đó.

Lưu ý: Trong hướng dẫn này, chúng ta sẽ sử dụng phiên bản Pro vì có đi kèm với Icon block.

Việc đầu tiên bạn cần làm là kích hoạt pluign SeedProd, sau khi kích hoạt xong, hãy vào SeedProd > Settings và nhập license key.

Cách thêm icon font vào theme WordPress với SeedProd
Cách thêm icon font vào theme WordPress với SeedProd

Bạn có thể tìm thông tin này trong tài khoản trên trang web SeedProd. Sau khi nhập license key, hãy nhấp vào nút Verify Key.

Tiếp theo, bạn cần truy cập SeedProd > Pages và nhấp vào nút Add New Landing Page.

Truy cập SeedProd chọn Pages và nhấp vào nút Add New Landing Page
Truy cập SeedProd chọn Pages và nhấp vào nút Add New Landing Page

Bây giờ, bạn có thể chọn một template để sử dụng làm cơ sở cho trang web. SeedProd có hơn 180 template được thiết kế chuyên nghiệp mà bạn có thể tùy chỉnh theo nhu cầu của blog hoặc trang web WordPress.

Để chọn một template, di chuột qua và sau đó nhấp vào icon Checkmark.

Di chuột qua và nhấp vào icon Checkmark để chọn template
Di chuột qua và nhấp vào icon Checkmark để chọn template

Vietnix khuyến khích sử dụng Ebook Sales Page template trong tất cả các hình ảnh, vì template này hoàn hảo cho việc digital product. Tuy nhiên, bạn có thể sử dụng bất kỳ thiết kế nào bạn muốn.

Tiếp theo, hãy nhập tên cho trang tùy chỉnh. SeedProd sẽ tự động tạo một URL dựa trên tiêu đề của trang, nhưng bạn có thể thay đổi URL này thành bất cứ điều gì bạn muốn.

Khi bạn hài lòng với thông tin bạn đã nhập, hãy nhấp vào nút Save and Start Editing the Page.

Nhấp vào nút Save and Start Editing the Page để lưu
Nhấp vào nút Save and Start Editing the Page để lưu

Tiếp theo, bạn sẽ được chuyển đến page builder trang kéo và thả của SeedProd, nơi bạn có thể tùy chỉnh template.

Editor SeedProd hiển thị một bản xem trước trực tiếp của thiết kế ở bên phải và một số cài đặt block ở bên trái.

Editor SeedProd
Editor SeedProd

Menu bên trái cũng có các block mà bạn có thể kéo và thả vào thiết kế. Bạn có thể kéo và thả các block tiêu chuẩn như button và hình ảnh hoặc sử dụng các block nâng cao như contact form, countdown, social share button và nhiều block khác.

Menu bên trái cũng có các block mà bạn có thể kéo và thả vào thiết kế
Menu bên trái cũng có các block mà bạn có thể kéo và thả vào thiết kế

Để tùy chỉnh bất kỳ block nào, chỉ cần nhấp để chọn block trong bố cục. Menu bên trái sẽ hiển thị tất cả các cài đặt mà bạn có thể sử dụng để tùy chỉnh block đó.

Ví dụ, bạn thường có thể thay đổi màu nền, thêm hình ảnh nền hoặc thay đổi bảng màu và phông chữ để phù hợp tốt hơn với thương hiệu của bạn.

Nhấp chọn block trong bố cục để tùy chỉnh block
Nhấp chọn block trong bố cục để tùy chỉnh block

Để thêm icon font vào trang, chỉ cần tìm Icon block trong cột bên trái, sau đó kéo nó vào bố cục của bạn. SeedProd sẽ mặc định hiển thị một icon arrow.

Tìm Icon block để thêm icon font vào trang
Tìm Icon block để thêm icon font vào trang

Để hiển thị một icon Font Awesome khác, chỉ cần nhấp để chọn Icon block. Trong menu bên trái, di chuột qua icon và sau đó nhấp vào nút Icon Library khi xuất hiện.

Chọn Icon block để hiển thị một icon Font Awesome khác
Chọn Icon block để hiển thị một icon Font Awesome khác

Bây giờ bạn sẽ thấy tất cả các icon Font Awesome khác nhau mà bạn có thể chọn. Chỉ cần tìm icon font mà bạn muốn sử dụng và nhấp chọn.

Chỉ cần tìm icon font mà bạn muốn sử dụng và nhấp chọn
Chỉ cần tìm icon font mà bạn muốn sử dụng và nhấp chọn

SeedProd bây giờ sẽ thêm icon vào bố cục của bạn. Sau khi chọn một icon, bạn có thể thay đổi căn chỉnh, màu sắc và kích thước bằng cách sử dụng các cài đặt trong menu bên trái.

Sau khi chọn một icon bạn có thể tùy chỉnh theo ý muốn
Sau khi chọn một icon bạn có thể tùy chỉnh theo ý muốn

Bạn cũng có thể thêm một link vào icon font bằng cách nhập vào field Link trong menu bên trái.

Một lựa chọn khác là sử dụng ready-made Icon Box của SeedProd.

Điều này cho phép bạn nhập một số văn bản và sau đó hiển thị một icon font bên cạnh, làm cho icon font trở thành một sự lựa chọn hữu ích cho các feature box.

Ready-made Icon Box của SeedProd cho phép nhập một số văn bản
Ready-made Icon Box của SeedProd cho phép nhập một số văn bản

Chỉ cần tìm Icon Box trong menu bên trái và kéo nó vào bố cục của bạn. Sau đó, bạn có thể nhấp để chọn block và thay đổi icon bằng cách tuân theo quy trình tương tự đã mô tả ở trên.

Tìm Icon Box trong menu
Tìm Icon Box trong menu

Sau đó, bạn có thể nhập tiêu đề và văn bản nội dung. Bạn cũng có thể thay đổi khoảng cách của block, màu sắc văn bản, thêm hiệu ứng CSS và nhiều hơn nữa bằng cách chọn tab Advanced.

thêm hiệu ứng CSS và nhiều hơn nữa bằng cách chọn tab Advanced
Thêm hiệu ứng CSS và nhiều hơn nữa bằng cách chọn tab Advanced

Bạn có thể tiếp tục làm việc trên trang bằng cách thêm nhiều block hơn và tùy chỉnh những block đó trong menu bên trái.

Khi bạn hài lòng với cách trang hiển thị, hãy nhấp vào nút Save. Sau đó, bạn có thể chọn Publish để đưa trang đó trực tiếp lên trang web.

Lời kết

Vietnix hy vọng bài viết trên đã giúp cho bạn hiểu cách thêm icon font vào theme WordPress. Tóm lại, việc thêm icon font vào theme là một cách hữu ích để tăng tương tác, tăng tính trực quan cho website và làm trang web của bạn trở nên nổi bật hơn. Ngoài ra, bạn cũng có thể tham khảo bài viết khác như 2 cách thêm icon vào menu WordPress đơn giản hoặc favicon là gì? Hướng dẫn tạo và thêm Favicon cho website tại Vietnix.vn để tối ưu tốt hơn cho website, chúc bạn thành công!

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Lê Nam

WordPress Expert
tại

Kết nối với mình qua

Kết nối với mình qua

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

ĐĂNG KÝ NHẬN TÀI LIỆU THÀNH CÔNG
Cảm ơn bạn đã đăng ký nhận tài liệu mới nhất từ Vietnix!
ĐÓNG

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG