Mọi người tự nhiên bị thu hút bởi vẻ ngoài trực quan của một Website của WordPress, càng nhiều càng tốt khi họ bị thu hút bởi nội dung bằng văn bản mà bạn chia sẻ. Trên thực tế, theo Jeff Bullas ", Các bài viết có hình ảnh có lượt xem 94% nhiều hơn các bài viết không có hình ảnh.

Đó là một sự gia tăng lớn về số lần xem trang nếu bạn hỏi tôi.

Và chính xác là lý do gì?

Chỉ cần thêm một vài hình ảnh chất lượng cao, phù hợp với bài viết trong nội dung của bạn.

Nhưng những gì về những hình ảnh trên của bạn Website vượt ra ngoài ảnh chụp màn hình và ảnh chụp? Còn những hình ảnh không chỉ thu hút sự chú ý mà còn phục vụ một chức năng hữu ích thì sao?

Vâng, tôi đang nói về các biểu tượng. Bạn biết đấy, những bức ảnh nhỏ bé được tìm thấy trên các trang web để khuyến khích chia sẻ trên mạng xã hội, để minh họa các trang liên hệ của các chủ doanh nghiệp, để nêu tên một vài trường hợp sử dụng.

Vì ý tưởng được lấy từ trang web này, khách không chỉ bị thu hút bởi hình ảnh trên các trang web mà còn có xu hướng tương tác với chúng, mọi người bắt đầu thêm chúng vào trang web của họ.

Tuy nhiên, khi công nghệ tiến bộ, như mọi khi, các biểu tượng hình ảnh truyền thống đã bắt đầu trở thành giải pháp hình ảnh cho các trang web. Điều này là do chúng làm cho các trang nặng hơn nhiều và do đó chậm hơn, nhưng trên hết giải pháp này không phải lúc nào cũng phù hợp với điện thoại di động.

Nhưng có một giải pháp: phông chữ biểu tượng.

Hôm nay tôi sẽ cho bạn biết phông chữ biểu tượng là gì và lợi ích của việc sử dụng chúng trên trang web WordPress của bạn. Ngoài ra, tôi sẽ chỉ cho bạn cách thêm phông chữ biểu tượng vào trang web WordPress của bạn bằng cách sử dụng plugin phổ biến " Font tốt hơn tạo ảnh vui nhộn '.

Vì vậy, hãy bắt đầu.

Phông chữ biểu tượng là gì và tại sao bạn nên sử dụng chúng?

Phông chữ biểu tượng chính xác như những gì họ nói: phông chữ được xây dựng hoàn toàn vào biểu tượng. Trên thực tế, phông chữ biểu tượng hoặc " make-icon "Có thể được mô tả như một phông chữ chỉ hiển thị các ký tự hoặc ký hiệu, không phải các chữ cái và số mà phông chữ và văn bản truyền thống được liên kết.

Phông chữ biểu tượng được sử dụng để hiển thị các biểu tượng thường được sử dụng trên trang web của bạn. Ví dụ: các nút mạng xã hội, giỏ hàng, nút tải xuống và nút điều hướng là những ví dụ về các biểu tượng hiển thị hình ảnh tương tác nhỏ trên trang web của bạn.

Tại sao sử dụng phông chữ biểu tượng?

Biểu tượng hình ảnh trước đây đã hoạt động tốt đối với nhiều chủ sở hữu trang web. Tuy nhiên, khi các quy tắc điều hướng, khả năng sử dụng và thiết kế phát triển, phông chữ biểu tượng đã trở thành giải pháp tốt nhất để hiển thị hình ảnh tương tác trên một trang web. website.

Dưới đây là một số lý do thuyết phục tại sao phông chữ biểu tượng là lựa chọn tốt nhất:

• Dễ dàng mở rộng mà không làm giảm chất lượng
• Có thể tùy chỉnh về màu sắc và bóng râm
• 100% đáp ứng
• Hoạt động giống như các sprite hình ảnh CSS, nhưng hoạt động giống như văn bản
• Dễ sử dụng
• Trình duyệt tương thích
• Tùy chỉnh độ mờ, xoay và hơn thế nữa
• Kích thước tệp nhỏ hơn
• Đừng hy sinh tốc độ hoặc hiệu suất của trang web của bạn

Như bạn có thể thấy, có một số lý do khiến bạn có thể muốn sử dụng phông chữ biểu tượng trên trang web của mình thay vì biểu tượng hình ảnh.

Cài đặt biểu tượng phông chữ trên trang web của bạn bằng plugin

Better Font Awesome là một Plugin WordPress phần mềm miễn phí cho phép bạn tự động tích hợp phiên bản Font Awesome mới nhất vào dự án WordPress của mình. Hơn nữa, nó đi kèm với CSS, mã ngắn và trình tạo mã ngắn TinyMCE.

Plugin này có nhiều tính năng hữu ích cho chủ sở hữu trang web:

• Cập nhật thường xuyên phiên bản mới nhất
• Khả năng chuyển đổi giữa các phiên bản Font Awesome mà không cần thay đổi mã ngắn
• Hỗ trợ các plugin phông chữ phổ biến khác bao gồm các mã ngắn của chúng
• Do jsDelivr CDN cấp

Bước 1: Cài đặt và kích hoạt phông chữ tốt hơn Tuyệt vời

Để bắt đầu, hãy cài đặt và kích hoạt plugin “Better Font Awesome” thông qua bảng điều khiển WordPress của bạn giống như bạn làm với bất kỳ plugin nào khác.

Đầu tiên, điều hướng đến " Plugin> Thêm mới Và tìm kiếm " Font tốt hơn tạo ảnh vui nhộn '.

Sau đó chọn " cài đặt bây giờ »Và bấm vào« hoạt động '.

Sau khi kích hoạt, plugin thêm một liên kếtFont tốt hơn tạo ảnh vui nhộnTrong menu Cài đặt của bảng điều khiển WordPress của bạn.

Bước 2: Cấu hình cài đặt plugin

Để cấu hình plugin « Font tốt hơn tạo ảnh vui nhộn ", Bắt đầu bằng cách nhấp vào mục menu" Font tốt hơn tạo ảnh vui nhộn Trong Cài đặt. Khi bạn làm điều đó, bạn sẽ thấy một màn hình tương tự như thế này:

Ở đây bạn có thể làm như sau:

• phiên bản: Chọn phiên bản “Better Font Awesome” mà bạn muốn sử dụng.
• Sử dụng CSS tối thiểu: Chọn hộp này nếu bạn muốn sử dụng phiên bản rút gọn của CSS.
• Xóa phông chữ in hiện có: chọn hộp này để cố gắng xóa các đoạn mã và mã ngắn được mã hóa bởi các plugin và chủ đề khác.
• Ẩn bài đánh giá của quản trị viên: Ẩn các cảnh báo quản trị mặc định xuất hiện khi xảy ra lỗi API và CDN.

Ngoài số lượng tối thiểu các tùy chọn Better Font Awesome, có một phần "Cách sử dụng" nhỏ giải thích cách thêm biểu tượng vào trang web của bạn.

Bước 3: Thêm các biểu tượng vào trang web của bạn

Có ba cách dễ dàng để thêm các biểu tượng vào trang web của bạn bằng cách sử dụng “Better Font Awesome” - thông qua shortcode, HTML hoặc TinyMCE.

# 1. Thêm biểu tượng bằng shortcode

Để thêm các biểu tượng vào trang web của bạn bằng mã ngắn, trước tiên hãy truy cập vào " Font Awesome Để xem danh sách đầy đủ các biểu tượng có sẵn có thể được sử dụng.

Tại đây bạn có thể tìm kiếm biểu tượng mình muốn. Ví dụ: nếu bạn muốn có biểu tượng "email", chỉ cần tìm kiếm từ khóa đó và chọn biểu tượng bạn muốn sử dụng bằng cách nhấp vào nó.

Sau khi nhấp vào biểu tượng bạn muốn thêm, bạn sẽ thấy màn hình hiển thị hình ảnh của biểu tượng với các kích thước khác nhau và một khối mã nhỏ:

Chỉ cần sao chép khối mã và dán vào bất kỳ đâu trên trang web của bạn bằng cách sử dụng tab "Trình chỉnh sửa Văn bản". Đây là giao diện của trình chỉnh sửa trên trang web của bạn:

Cuối cùng, đây là những gì khách sẽ thấy khi họ truy cập trang web của bạn:

# 2. Thêm biểu tượng bằng mã HTML

Như chúng ta đã thấy trong phần " Sử dụng Bạn có tùy chọn sử dụng mã HTML để chèn các biểu tượng trên trang web của mình. Tuy nhiên, các nhà phát triển plugin lưu ý rằng việc sử dụng HTML yêu cầu các tiền tố phiên bản cụ thể.

Đó là lý do tại sao họ khuyên bạn nên sử dụng mã ngắn để thay thế. Tuy nhiên, nếu bạn muốn sử dụng mã HTML, Font Awesome có thông tin hữu ích ở đây.

# 3. Thêm các biểu tượng bằng TinyMCE

Đây có lẽ là cách dễ nhất để thêm các biểu tượng vào trang web của bạn. Trong chế độ "Trình chỉnh sửa trực quan", chỉ cần nhấp vào biểu tượng Chèn. Từ đó, cuộn qua các tùy chọn biểu tượng có sẵn hoặc thu hẹp kết quả của bạn bằng tính năng tìm kiếm.

Khi bạn tìm thấy biểu tượng mình muốn, chỉ cần nhấp vào biểu tượng đó. Trình tạo mã ngắn tự động nhập thông tin cần thiết vào bài đăng hoặc trang của bạn.

Nếu bạn muốn tìm hiểu cách tùy chỉnh các biểu tượng trên trang web của mình, hãy tham khảo các ví dụ về " Font Awesome '.