Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn tạo Dễ dàng và Miễn phí bất kỳ trang web hoặc thiết kế blog với một cái nhìn chuyên nghiệp. Ngừng trả nhiều tiền cho một trang web mà bạn có thể tự làm.

Mọi người tự nhiên bị thu hút bởi khía cạnh trực quan của một trang web WordPress, cũng giống như họ bị thu hút bởi nội dung bằng văn bản mà bạn chia sẻ. 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 hình ảnh trên trang web của bạn vượt ra ngoài ảnh chụp màn hình và ảnh chụp thì sao? Còn những bức tranh không chỉ thu hút sự chú ý mà còn có 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.

Khi ý tưởng được thực hiện trên trang web này, khách truy cập không chỉ bị thu hút bởi hình ảnh trên 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 '.

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí.

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 wordpressPhô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.

Fonticone trên một trang web

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

Các biểu tượng hình ảnh đã hoạt động tốt trong quá khứ đố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 trang web.

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 miễn phí cho phép bạn tự động tích hợp phiên bản mới nhất của Font Awesome 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 '.

Bạn có muốn bán sản phẩm của mình trên internet?

Tải xuống WooCommerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress và dễ dàng tạo cửa hàng trực tuyến của bạn. Hoàn hảo cho người mới bắt đầu.

Cài đặt và kích hoạt plugin tuyệt vời hơn với phông chữ tốt hơ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.

Phông chữ tốt hơn plugin tuyệt vời Mục menu mới

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:

Cài đặt cấu hình plugin tuyệt vời phông chữ tốt hơnỞ đâ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.

Sử dụng plugin tuyệt vời phông chữ tốt hơ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ó.

Tìm biểu tượng trên fontawesomeSau 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ỏ:

Biểu tượng phông chữ với tất cả các kích thước của nó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:

Trình soạn thảo mã với các biểu tượng trên wordpressTrình soạn thảo mã với các biểu tượng trên wordpressCuối cùng, đây là những gì khách truy cập vào trang web sẽ thấy khi họ truy cập trang web của bạn:

Kết quả áp phích biểu tượng wordpress
# 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.

Nút tìm kiếm biểu tượng trình chỉnh sửa trực quan Wordpress

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 '.

5 cổ phiếu
cổ phiếu2
tweet1
Enregistrer2