Dùng icon fonts WordPress không code

3 tháng ago, WordPress Plugin, 1 Views

Tại Sao Nên Sử Dụng Icon Fonts Trong WordPress?

Trong thế giới thiết kế web hiện đại, icon fonts đã trở thành một lựa chọn phổ biến để hiển thị biểu tượng trên các trang web WordPress. Chúng mang lại nhiều lợi ích so với các phương pháp truyền thống như sử dụng hình ảnh (JPEG, PNG, GIF) hoặc SVG. Hãy cùng khám phá những ưu điểm nổi bật của icon fonts:

Khả năng mở rộng và thu nhỏ vô hạn: Icon fonts là đồ họa vector, do đó chúng có thể được mở rộng hoặc thu nhỏ mà không làm giảm chất lượng hình ảnh. Điều này rất quan trọng đối với các trang web hiển thị trên nhiều loại thiết bị với kích thước màn hình khác nhau.
Kích thước tệp nhỏ gọn: So với hình ảnh, icon fonts thường có kích thước tệp nhỏ hơn đáng kể. Điều này giúp giảm thời gian tải trang và cải thiện hiệu suất tổng thể của trang web.
Dễ dàng tùy chỉnh: Bạn có thể dễ dàng thay đổi màu sắc, kích thước và bóng đổ của icon fonts bằng CSS. Điều này giúp bạn tạo ra các biểu tượng phù hợp với phong cách thiết kế của trang web một cách nhanh chóng và linh hoạt.
Khả năng tương thích tốt với trình duyệt: Icon fonts hoạt động tốt trên hầu hết các trình duyệt web hiện đại, đảm bảo trải nghiệm người dùng nhất quán trên mọi nền tảng.

Tóm lại, sử dụng icon fonts trong WordPress là một cách hiệu quả để cải thiện hiệu suất, tính linh hoạt và khả năng tùy chỉnh của trang web.

Cách Sử Dụng Icon Fonts Trong WordPress Mà Không Cần Code

Mặc dù icon fonts có thể được tích hợp thủ công thông qua CSS, nhưng có rất nhiều plugin WordPress giúp đơn giản hóa quá trình này, đặc biệt là đối với những người không quen thuộc với code. Dưới đây là một số plugin phổ biến và dễ sử dụng:

1. Font Awesome

Font Awesome là một trong những thư viện icon fonts phổ biến nhất trên thế giới. Nó cung cấp hàng ngàn biểu tượng miễn phí và trả phí, phù hợp với mọi nhu cầu thiết kế. Plugin Font Awesome cho WordPress giúp bạn dễ dàng tích hợp thư viện này vào trang web của mình.

Cách cài đặt và sử dụng:

Vào trang quản trị WordPress, tìm đến “Plugins” và chọn “Add New”.
Tìm kiếm “Font Awesome” và cài đặt plugin chính thức.
Kích hoạt plugin.
Sau khi kích hoạt, Font Awesome sẽ tự động được tích hợp vào trang web của bạn. Bạn có thể sử dụng các biểu tượng bằng cách chèn mã HTML tương ứng vào bài viết, trang hoặc widget. Ví dụ: <i class="fas fa-home"></i> sẽ hiển thị biểu tượng trang chủ.

Bạn có thể tìm mã HTML của từng biểu tượng trên trang web chính thức của Font Awesome.

2. Icomoon

Icomoon là một nền tảng tạo và quản lý icon fonts mạnh mẽ. Nó cho phép bạn tải lên các biểu tượng của riêng mình, chỉnh sửa chúng và tạo ra một bộ icon font tùy chỉnh. Icomoon cũng cung cấp một thư viện icon miễn phí và trả phí phong phú.

Cách cài đặt và sử dụng:

Truy cập trang web Icomoon: https://icomoon.io/
Chọn các biểu tượng bạn muốn sử dụng từ thư viện hoặc tải lên các biểu tượng của riêng bạn.
Tùy chỉnh các biểu tượng nếu cần thiết.
Tạo một bộ icon font bằng cách nhấp vào nút “Generate Font”.
Tải xuống tệp zip chứa các tệp font và CSS.
Tải các tệp font lên thư mục theme của bạn (ví dụ: /wp-content/themes/your-theme/fonts/).

Thêm đoạn code CSS sau vào tệp style.css của theme hoặc thông qua Customizer:

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?7kkyc2');
    src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
      url('fonts/icomoon.woff?7kkyc2') format('woff'),
      url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change styles */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-home:before {
    content: "\e900";
  }

Sử dụng các biểu tượng bằng cách chèn mã HTML tương ứng. Ví dụ: <i class="icon-home"></i>.

Lưu ý: Thay đổi đường dẫn đến tệp font và tên class biểu tượng cho phù hợp với thiết lập của bạn.

3. Sử dụng các Plugin khác

Ngoài Font Awesome và Icomoon, còn có nhiều plugin WordPress khác hỗ trợ sử dụng icon fonts, chẳng hạn như:

WP SVG Icons: Cho phép bạn tải lên và sử dụng các biểu tượng SVG một cách dễ dàng.
Material Design Icons: Cung cấp một bộ biểu tượng thiết kế Material Design phong phú.
Genericons: Một bộ biểu tượng đơn giản và dễ sử dụng, được thiết kế bởi Automattic (công ty đứng sau WordPress.com).

Hãy thử nghiệm với các plugin khác nhau để tìm ra lựa chọn phù hợp nhất với nhu cầu của bạn.

Lời Khuyên Khi Sử Dụng Icon Fonts Trong WordPress

Để đảm bảo hiệu suất và trải nghiệm người dùng tốt nhất, hãy lưu ý những điều sau khi sử dụng icon fonts trong WordPress:

Chọn thư viện icon phù hợp: Xem xét kỹ lưỡng nhu cầu thiết kế của bạn và chọn một thư viện icon phù hợp với phong cách và chức năng của trang web.
Sử dụng số lượng biểu tượng hợp lý: Tránh sử dụng quá nhiều biểu tượng trên một trang, vì điều này có thể làm chậm thời gian tải trang.
Tối ưu hóa kích thước tệp font: Nếu bạn tạo icon font tùy chỉnh, hãy đảm bảo rằng kích thước tệp được tối ưu hóa để giảm thời gian tải.
Kiểm tra khả năng tương thích trên các trình duyệt và thiết bị khác nhau: Đảm bảo rằng các biểu tượng hiển thị chính xác trên tất cả các trình duyệt và thiết bị phổ biến.
Sử dụng lazy loading cho icon fonts (nếu cần thiết): Lazy loading có thể giúp cải thiện thời gian tải trang bằng cách chỉ tải icon fonts khi chúng cần thiết.

Kết Luận

Icon fonts là một công cụ mạnh mẽ để cải thiện giao diện và trải nghiệm người dùng của trang web WordPress. Bằng cách sử dụng các plugin và làm theo các lời khuyên trên, bạn có thể dễ dàng tích hợp icon fonts vào trang web của mình mà không cần phải viết code phức tạp. Hãy bắt đầu khám phá và tận dụng những lợi ích mà icon fonts mang lại!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa