Bạn có muốn thêm phông chữ biểu tượng vào trang web WordPress của mình không? Gần đây, một trong những độc giả của chúng tôi đã hỏi cách dễ nhất để thêm phông chữ biểu tượng vào chủ đề WordPress của bạn là gì.
Phông chữ biểu tượng cho phép bạn thêm các biểu tượng vector (thay đổi kích thước) mà không làm chậm trang web của bạn. Chúng được tải dưới dạng phông chữ web và có thể được thiết kế bằng CSS.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm phông chữ biểu tượng vào chủ đề WordPress của bạn, từng bước một.
Phông chữ biểu tượng là gì và tại sao tôi nên sử dụng chúng?
Phông chữ biểu tượng chứa các ký hiệu hoặc chữ tượng hình thay vì chữ và số. Những chữ tượng hình này có thể dễ dàng thêm vào nội dung trang web và thay đổi kích thước bằng CSS. So với các biểu tượng dựa trên hình ảnh, các biểu tượng phông chữ nhanh hơn nhiều, điều này giúp cho tốc độ chung của trang web WordPress của bạn.
Phông chữ biểu tượng có thể được sử dụng để hiển thị các biểu tượng thường được sử dụng. Ví dụ: bạn có thể sử dụng chúng với giỏ hàng, nút tải xuống, hộp tính năng, cuộc thi quà tặng và thậm chí trong menu điều hướng WordPress.
Có một số phông chữ biểu tượng mã nguồn mở và miễn phí có sẵn có hàng trăm biểu tượng đẹp.
Trên thực tế, mọi cài đặt WordPress đều đi kèm với bộ phông chữ biểu tượng dashicon miễn phí. Các biểu tượng này được sử dụng trong menu quản trị WordPress và các khu vực khác trong khu vực quản trị WordPress.
Một số nguồn biểu tượng phổ biến khác là:
- Phông chữ tuyệt vời
- Chung chung
- IcoMoon
- Tuyến tính
- Biểu tượng tài liệu của Google
- Dự án thực chất
Vì mục đích của hướng dẫn này, chúng tôi sẽ sử dụng Font Awesome. Đây là phông chữ biểu tượng mã nguồn mở và miễn phí phổ biến nhất hiện có. Chúng tôi sử dụng FontAwgie trên trang web WPBeginner, cũng như các plugin WordPress của chúng tôi như OptinMonster, WPForms, RaffPress, v.v.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến ba cách để thêm phông chữ biểu tượng trong WordPress. Bạn có thể chọn giải pháp phù hợp nhất với bạn.
Thêm phông chữ biểu tượng trong WordPress bằng cách sử dụng plugin
Nếu bạn là người dùng cấp độ mới bắt đầu chỉ cần cố gắng thêm một số biểu tượng vào bài đăng hoặc trang của mình thì phương pháp này phù hợp với bạn. Bạn sẽ không phải sửa đổi các tệp chủ đề và bạn có thể sử dụng phông chữ biểu tượng ở mọi nơi trên trang web của mình.
Điều đầu tiên cần làm là cài đặt và kích hoạt plugin Font Awesome WordPress. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Khi kích hoạt, plugin cho phép hỗ trợ Font Awesome cho chủ đề của bạn. Bây giờ bạn có thể chỉnh sửa bất kỳ bài đăng hoặc trang WordPress nào và sử dụng một mã ngắn biểu tượng như thế này:
(tên biểu tượng = "tên lửa")
Bạn có thể sử dụng mã ngắn này kết hợp với văn bản khác hoặc chỉ trong một khối mã ngắn chuyên dụng.
Sau khi thêm, bạn có thể xem trước bài đăng hoặc trang của mình để xem biểu tượng sẽ trông như thế nào trên một trang web trực tiếp. Đây là cách nó nhìn trên trang web thử nghiệm của chúng tôi.
Bạn cũng có thể tự thêm mã ngắn cho biểu tượng phông chữ trong một khối đoạn văn bản nơi bạn có thể sử dụng cài đặt khối để tăng kích thước của biểu tượng.
Khi kích thước của văn bản tăng lên, điều này có vẻ lạ trong trình soạn thảo văn bản. Điều này là do shortcode không tự động thay đổi thành phông chữ biểu tượng trong trình chỉnh sửa khối.
Bạn sẽ cần nhấp vào nút xem trước trên bài đăng hoặc trang của bạn để xem kích thước biểu tượng thực tế sẽ như thế nào.
Bạn cũng có thể sử dụng shortcode biểu tượng bên trong các cột và tạo các hộp tính năng như thế này:
2. Sử dụng phông chữ biểu tượng với trình tạo trang WordPress
Các plugin xây dựng trang WordPress phổ biến nhất đi kèm với hỗ trợ tích hợp cho phông chữ biểu tượng. Điều này cho phép bạn dễ dàng sử dụng phông chữ biểu tượng trên các trang đích của mình, cũng như các khu vực khác trên trang web của bạn.
Người xây dựng hải ly
Beaver Builder là plugin xây dựng trang WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng tạo bố cục trang WordPress tùy chỉnh mà không cần viết bất kỳ mã nào.
Beaver Builder đi kèm với các biểu tượng và mô-đun sẵn sàng sử dụng đẹp mắt mà bạn có thể kéo và thả trên các bài đăng và trang của mình.
Bạn có thể tạo các nhóm biểu tượng, thêm một biểu tượng và di chuyển chúng đến các hàng và cột được định vị tốt. Bạn cũng có thể chọn màu sắc, nền, khoảng cách và lề của riêng bạn mà không cần viết CSS.
Bạn thậm chí có thể tạo các chủ đề WordPress hoàn toàn tùy chỉnh mà không cần viết bất kỳ mã nào với sản phẩm Themer của Beaver Builder.
Elementor Pro
Elementor là một plugin xây dựng trang WordPress phổ biến khác. Nó cũng đi kèm với các yếu tố khác nhau cho phép bạn sử dụng phông chữ biểu tượng, bao gồm cả yếu tố Biểu tượng.
Bạn có thể chỉ cần kéo và thả một biểu tượng ở bất cứ đâu và sử dụng nó với các hàng, cột và bảng để tạo các trang đẹp.
Các trình tạo trang phổ biến khác như Divi và Visual Composer cũng hỗ trợ đầy đủ cho các phông chữ biểu tượng.
3. Thêm phông chữ biểu tượng trong WordPress bằng mã
Như chúng tôi đã đề cập trước đó, phông chữ biểu tượng chỉ là phông chữ và có thể được thêm vào trang web của bạn giống như thêm bất kỳ phông chữ tùy chỉnh nào.
Một số phông chữ biểu tượng, như Font Awesome, có sẵn trên các máy chủ CDN trên web và có thể được liên kết trực tiếp từ chủ đề WordPress của bạn.
Bạn cũng có thể tải lên toàn bộ thư mục phông chữ vào một thư mục trong chủ đề WordPress của bạn và sau đó sử dụng các phông chữ đó trong biểu định kiểu của bạn.
Vì chúng tôi đang sử dụng Font Awesome cho hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách bạn có thể thêm nó bằng cả hai phương pháp.
Phương pháp 1:
Phương pháp thủ công này khá dễ dàng.
Trước tiên, bạn cần truy cập trang web Font Awesome và nhập địa chỉ email của bạn để lấy mã nhúng.
Bây giờ hãy kiểm tra hộp thư đến của bạn để biết email Phông chữ Tuyệt vời với mã nhúng của bạn. Sao chép và dán mã nhúng này vào tệp header.php của chủ đề WordPress của bạn ngay trước thẻ.
Mã nhúng của bạn sẽ là một dòng duy nhất sẽ tìm kiếm thư viện Font Awesome trực tiếp từ các máy chủ CDN của bạn. Nó sẽ trông giống như thế này:
Phương pháp này đơn giản hơn, nhưng có thể gây ra xung đột với các plugin khác.
Cách tiếp cận tốt hơn sẽ là tải JavaScript chính xác vào WordPress bằng cơ chế xếp hàng tích hợp.
Thay vì liên kết đến biểu định kiểu từ mẫu tiêu đề của chủ đề, bạn có thể thêm đoạn mã sau vào tệp tin.php của chủ đề hoặc trong một plugin dành riêng cho trang web.
function wpb_load_fa() {
wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Phương pháp 2:
Phương pháp thứ hai không phải là dễ nhất, nhưng nó sẽ cho phép bạn lưu trữ các phông chữ từ biểu tượng Font Awesome trên trang web của riêng bạn.
Trước tiên, bạn phải truy cập trang web Font Awesome để tải gói phông chữ về máy tính của bạn.
Chỉ cần tải về các phông chữ biểu tượng và giải nén gói.
Bây giờ, bạn sẽ cần kết nối với lưu trữ WordPress của mình bằng ứng dụng khách FTP và chuyển đến thư mục chủ đề WordPress của bạn.
Bạn phải tạo một thư mục mới ở đó và đặt tên là nguồn. Tiếp theo, bạn cần tải lên nội dung của thư mục phông chữ biểu tượng vào thư mục phông chữ trên máy chủ lưu trữ web của bạn.
Bây giờ bạn đã sẵn sàng để tải phông chữ biểu tượng vào chủ đề WordPress của bạn. Chỉ cần thêm mã này vào tệp tin.php của chủ đề hoặc plugin dành riêng cho trang web.
function wpb_load_fa() {
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Bạn đã tải thành công Font Awesome vào chủ đề WordPress của bạn.
Bây giờ đến phần mà bạn sẽ thêm các biểu tượng thực vào chủ đề, bài đăng hoặc trang WordPress của mình.
Hiển thị thủ công các phông chữ biểu tượng trong WordPress
Truy cập trang web Font Awesome để xem danh sách đầy đủ các biểu tượng có sẵn. Nhấp vào bất kỳ biểu tượng nào bạn muốn sử dụng và bạn sẽ thấy tên biểu tượng.
Sao chép tên biểu tượng và sử dụng nó như thế này trong WordPress.
Bạn có thể thiết kế biểu tượng này trong biểu định kiểu của chủ đề của bạn như thế này:
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}
Bạn cũng có thể kết hợp các biểu tượng khác nhau và thiết kế chúng cùng một lúc. Ví dụ: giả sử bạn muốn hiển thị danh sách các liên kết có biểu tượng bên cạnh chúng. Bạn có thể bọc chúng dưới một
phần tử với một lớp cụ thể.
Home Library Applications Settings
Bây giờ bạn có thể thiết kế chúng trong biểu định kiểu của chủ đề của bạn như thế này:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm phông chữ biểu tượng vào chủ đề WordPress của bạn. Bạn cũng có thể xem hướng dẫn của chúng tôi về cách thêm biểu tượng hình ảnh bằng menu điều hướng trong WordPress.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter y Facebook.
