VietNetwork.Vn

Bạn có muốn sử dụng phông chữ biểu tượng trong trình chỉnh sửa bài đăng WordPress không?

Phông chữ biểu tượng cho phép bạn dễ dàng sử dụng hình ảnh và biểu tượng trong văn bản. Chúng có trọng lượng nhẹ và sẽ không làm chậm trang web của bạn, đồng thời chúng có thể dễ dàng thu nhỏ theo bất kỳ kích thước nào và được tạo kiểu giống như bất kỳ phông chữ văn bản nào khác.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng sử dụng phông chữ biểu tượng trong trình chỉnh sửa bài đăng WordPress mà không cần viết bất kỳ mã HTML nào.

Chúng tôi sẽ chỉ cho bạn nhiều phương pháp, mỗi phương pháp sử dụng cách tiếp cận hơi khác so với phương pháp kia. Bạn có thể chọn một cái phù hợp nhất với mình.

1. Phương pháp 1. Thêm Phông chữ Biểu tượng trong Trình chỉnh sửa bài đăng WordPress bằng Biểu tượng văn bản có định dạng JVM

Phương pháp này được khuyến nghị sử dụng trên bất kỳ loại trang web WordPress nào. Nó rất dễ sử dụng và hoạt động liền mạch với trình chỉnh sửa khối.

Trước tiên, bạn cần cài đặt và kích hoạt plugin JVM Rich Text Icons. Để 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.

Sau khi kích hoạt, bạn có thể chỉ cần chỉnh sửa bài đăng hoặc trang WordPress hoặc tạo một bài mới. Bên trong trình chỉnh sửa bài đăng, hãy thêm khối đoạn văn mới và bạn sẽ thấy biểu tượng Cờ mới trên thanh công cụ khối.


Nhấn vào sẽ hiện ra popup các icon cho bạn lựa chọn. Nó sử dụng phông chữ biểu tượng Font Awesome phổ biến theo mặc định.

Bạn có thể sử dụng tính năng tìm kiếm để tìm một biểu tượng hoặc chỉ cần cuộn xuống để tìm biểu tượng bạn muốn rồi nhấp để thêm biểu tượng đó.


Một lợi thế của việc sử dụng phông chữ biểu tượng là bạn có thể sử dụng CSS để tạo kiểu cho chúng.

Tuy nhiên, vì bạn đã sử dụng trình chỉnh sửa khối, nên bạn chỉ cần sử dụng các công cụ màu tích hợp sẵn để tạo kiểu cho các biểu tượng.


Plugin cho phép bạn sử dụng phông chữ biểu tượng trong hầu hết các khối văn bản như Đoạn văn, Danh sách, Nút, Cột, Bìa, v.v.

Dưới đây là một ví dụ về việc sử dụng phông chữ biểu tượng và tùy chọn khối để tạo kiểu cho ba cột.


Một ví dụ hữu ích khác về việc sử dụng phông chữ biểu tượng là với các nút.

Lần này, chúng tôi đang sử dụng phông chữ biểu tượng nội tuyến bên cạnh một số văn bản cho hai nút.


Vui lòng sử dụng các công cụ chỉnh sửa khối như căn chỉnh văn bản, màu sắc, khoảng cách, v.v. để tận dụng tối đa các phông chữ biểu tượng.

2. Phương pháp 2. Thêm Phông chữ Biểu tượng trong Trình chỉnh sửa Bài đăng WordPress với Font Awesome

Phương pháp này yêu cầu bạn thêm mã ngắn trong trình chỉnh sửa bài đăng để hiển thị phông chữ biểu tượng. Bạn có thể sử dụng phương pháp này nếu bạn không cần thường xuyên sử dụng phông chữ biểu tượng trong các bài đăng và trang WordPress của mình.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Font Awesome. Để 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.

Sau khi kích hoạt, bạn có thể chỉnh sửa bài đăng hoặc trang trong WordPress và sử dụng mã ngắn sau để thêm biểu tượng phông chữ.
   
[icon name="home"]

Tham số tên ở đây là tên của phông chữ được sử dụng bởi Font Awesome. Bạn có thể tìm thấy toàn bộ danh sách trên trang Font Awesome cheatsheet.

Sau khi được 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 trang web trực tiếp vì nó sẽ không hiển thị dưới dạng biểu tượng trong trình chỉnh sửa khối.

Đây là cách nó trông trên trang web thử nghiệm của chúng tôi.


Bạn có thể sử dụng mã ngắn bên trong một đoạn văn và nội tuyến với văn bản khác. Bạn cũng có thể tự thêm nó bằng cách sử dụng khối 'Mã ngắn'.

Tuy nhiên, việc sử dụng khối 'Mã ngắn' sẽ không cung cấp cho bạn các tùy chọn kiểu dáng mà bạn sẽ có với các khối văn bản khác.

Bạn cũng có thể thêm mã ngắn bên trong các cột để tạo hàng tính năng.


Nó sẽ phức tạp hơn một chút vì bạn sẽ không thể nhìn thấy hình ảnh thực tế và chiều cao cột sẽ tiếp tục thay đổi trong trình chỉnh sửa.

Đây là giao diện của nó trên trang web thử nghiệm của chúng tôi. Các cột có cùng chiều cao, mặc dù chúng không có trong trình chỉnh sửa.


Có thể bạn sẽ phải xem trước tác phẩm của mình trong tab trình duyệt mới nhiều lần để xem nó sẽ trông như thế nào đối với người dùng.

3. Phương pháp 3. Sử dụng Phông chữ Biểu tượng với Trình tạo Trang WordPress

Phương pháp này rất tuyệt nếu bạn đang tạo trang đích hoặc thiết kế trang web của mình bằng trình tạo trang WordPress như SeedProd.

SeedProd là trình tạo trang WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng tạo các trang đích đẹp mắt hoặc thiết kế trang web hoàn chỉnh của mình.


Trước tiên, bạn cần cài đặt và kích hoạt plugin SeedProd. Để 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, bạn sẽ được yêu cầu nhập khóa cấp phép plugin của mình. Bạn có thể tìm thấy thông tin này trong tài khoản của mình trên trang web SeedProd.


Sau khi nhập khóa cấp phép của bạn và nhấp vào 'Xác minh khóa', bạn có thể bắt đầu làm việc trên trang đích của mình.

Chỉ cần truy cập trang SeedProd » Trang đích và nhấp vào nút 'Thêm trang đích mới'.


Sau đó, bạn sẽ được yêu cầu chọn một mẫu cho trang đích của mình.

SeedProd đi kèm với một loạt các thiết kế đẹp mắt mà bạn có thể sử dụng làm điểm bắt đầu hoặc bạn có thể bắt đầu với một mẫu trống và tự mình thiết kế toàn bộ.


Đối với hướng dẫn này, chúng tôi sẽ sử dụng một mẫu được thiết kế sẵn. Chỉ cần nhấp vào một mẫu để chọn nó và tiếp tục.

Tiếp theo, bạn sẽ được yêu cầu cung cấp tiêu đề cho trang đích của mình và chọn một URL.


Sau khi nhập chúng, nhấp vào nút 'Lưu và Bắt đầu Chỉnh sửa Trang' để tiếp tục.

SeedProd bây giờ sẽ khởi chạy giao diện trình tạo trang. Nó là một công cụ thiết kế kéo và thả, nơi bạn có thể chỉ cần trỏ và nhấp vào bất kỳ mục nào để chỉnh sửa nó.


Bạn cũng có thể kéo và thả các khối từ cột bên trái để thêm các yếu tố mới vào thiết kế của mình.

Vì lợi ích của hướng dẫn này, chúng tôi sẽ thêm khối Biểu tượng.


Sau khi bạn thêm khối, bạn chỉ cần nhấp để chỉnh sửa thuộc tính của nó.

Cột bên trái sẽ thay đổi để hiển thị các tùy chọn cho khối Biểu tượng. Bạn có thể nhấp vào phần 'Biểu tượng' ở bên trái và chọn một hình ảnh biểu tượng khác hoặc thay đổi màu sắc và kiểu dáng.


Một cách khác để sử dụng các biểu tượng trong SeedProd là thêm khối 'Hộp Biểu tượng'.

Sự khác biệt giữa khối này và khối 'Biểu tượng' mà chúng tôi đã sử dụng trước đây là 'Hộp biểu tượng' cho phép bạn thêm văn bản cùng với biểu tượng đã chọn.

Đây là một trong những cách phổ biến nhất để sử dụng các biểu tượng khi hiển thị các tính năng, dịch vụ và các mặt hàng khác của sản phẩm.


Bạn có thể đặt hộp biểu tượng của mình bên trong các cột, chọn màu và điều chỉnh kích thước biểu tượng theo ý thích của mình.

Ngoài ra, bạn cũng có thể định dạng văn bản đi kèm bằng thanh công cụ định dạng của SeedProd.


Khi bạn hoàn tất chỉnh sửa trang của mình, đừng quên nhấp vào nút 'Lưu' ở góc trên cùng bên phải của màn hình.

Nếu bạn đã sẵn sàng, bạn có thể nhấp vào 'Xuất bản' để trang hoạt động hoặc bạn có thể nhấp vào 'Xem trước' để đảm bảo rằng trang trông giống như bạn muốn.


Bạn cũng có thể nhấp vào 'Lưu dưới dạng Mẫu' để có thể sử dụng lại thiết kế này với SeedProd trên các phần khác của trang web của mình.

Đây là cách các phông chữ biểu tượng trông trên trang web thử nghiệm của chúng tôi.


Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách sử dụng phông chữ biểu tượng trong trình chỉnh sửa bài đăng WordPress mà không cần viết mã HTML. Bạn cũng có thể muốn xem hướng dẫn về hiệu suất WordPress của chúng tôi để tối ưu hóa tốc độ trang web của bạn hoặc các plugin trang đích tốt nhất cho WordPress.