Dashicons trong WordPress: Hướng dẫn đầy đủ, tối ưu hiệu năng và SEO

Dashicons là bộ icon mặc định của WordPress, được hiển thị dưới dạng font icon trong khu vực quản trị (Admin) và có thể sử dụng ở frontend. Bài viết này giúp bạn hiểu rõ Dashicons là gì, khi nào nên dùng, cách tích hợp chuẩn, tối ưu tốc độ, khả năng truy cập (accessibility), cũng như các lỗi thường gặp và cách khắc phục.

Dashicons là gì?

• Là bộ biểu tượng (icon font) tích hợp sẵn trong WordPress, đi kèm tệp font ở đường dẫn /wp-includes/fonts/dashicons.* và stylesheet đi kèm.
• Kích thước mặc định: 20px, có thể chỉnh bằng CSS.
• Sử dụng phổ biến trong menu quản trị, metabox, settings, toolbar, và UI plugin.

Khi nào nên dùng, khi nào nên tránh

Nên dùng:

• Xây dựng UI trong khu vực Admin (plugin/theme settings).
• Các thành phần quản trị như metabox, menu, danh sách post, button tác vụ.

Tránh hoặc cân nhắc thay thế bằng SVG:

• Giao diện frontend hướng người dùng cuối (ưu tiên SVG để nhẹ hơn, sắc nét, dễ tùy biến).
• Dự án cần hiệu năng cao, điểm Lighthouse/Pagespeed khắt khe.

Cách bật Dashicons ở frontend

Mặc định, Dashicons chỉ được nạp trong Admin. Nếu muốn dùng ở frontend, thêm vào functions.php (hoặc plugin của bạn):

• Thêm: add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_style('dashicons'); } );

Sau đó, bạn có thể gọi icon:

• HTML: <span class="dashicons dashicons-admin-home" aria-hidden="true"></span><span class="screen-reader-text">Trang chủ</span>

Gợi ý: thêm aria-hidden="true" cho icon và dùng screen-reader-text (class có sẵn trong WordPress) để đảm bảo truy cập cho người dùng đọc màn hình.

Chèn icon bằng pseudo-element

Bạn có thể dùng mã Unicode của icon (content) với font-family dashicons:

• CSS ví dụ: .my-link:before { content: "f102"; font-family: dashicons; margin-right: 6px; }
• Tham khảo nhanh một số mã:
  • f102 (admin-home)
  • f301 (twitter)
  • f304 (facebook)
  • f179 (search)
  • f525 (phone)
  • f465 (email)
  • f16b (car)
  • f120 (wordpress)
  • f19b (youtube)
  • f489 (schedule/calendar)

Lưu ý: nội dung content dùng escape mã Unicode dạng fxxx và font-family là dashicons.

Tùy chỉnh kích thước, màu sắc, căn chỉnh

• Tăng/giảm kích thước: .dashicons { font-size: 24px; }
• Đổi màu icon: .dashicons { color: #1e40af; }
• Căn giữa theo chữ: .dashicons { vertical-align: middle; }
• Tạo khoảng cách: .dashicons { margin-right: 6px; }

Khả năng truy cập (Accessibility)

• Với icon chỉ mang tính trang trí: thêm aria-hidden="true".
• Với icon có ý nghĩa: kèm text ẩn cho trình đọc màn hình:
  • HTML: <span class="dashicons dashicons-email" aria-hidden="true"></span><span class="screen-reader-text">Email hỗ trợ</span>
• Tránh dùng icon đơn độc làm nút không có nhãn.

Tối ưu hiệu năng

• Chỉ nạp Dashicons ở những trang thực sự cần trên frontend.
• Tránh lặp nạp nhiều bộ icon font (Dashicons + third-party) khi không cần thiết.
• Cân nhắc chuyển sang SVG cho icon ở frontend: nhẹ, sắc nét trên mọi DPI, dễ đổi màu nét/stroke, không phụ thuộc font.

Một số class Dashicons thông dụng

• Giao diện quản trị: dashicons-admin-home, dashicons-admin-generic, dashicons-admin-plugins, dashicons-admin-users
• Thương mại/Cart: dashicons-cart, dashicons-products, dashicons-money
• Truyền thông/Mạng xã hội: dashicons-facebook, dashicons-twitter, dashicons-youtube, dashicons-instagram, dashicons-email, dashicons-phone
• Phương tiện: dashicons-camera, dashicons-microphone, dashicons-video-alt
• Tiện ích/UI: dashicons-search, dashicons-menu, dashicons-download, dashicons-upload, dashicons-warning, dashicons-yes, dashicons-no, dashicons-trash

Mẹo: dùng dashicons + tên class cụ thể, ví dụ: <span class="dashicons dashicons-search"></span>.

Dashicons vs SVG vs Font Awesome

• Dashicons:
  • Ưu: Có sẵn trong WordPress, là tiêu chuẩn Admin UI, không cần thêm thư viện ngoài.
  • Nhược: Là font icon (tải cả bộ), cập nhật icon mới không thường xuyên, ít linh hoạt hơn SVG.
• SVG:
  • Ưu: Nhẹ, sắc nét, dễ tùy biến bằng CSS, nạp từng icon cần dùng, thân thiện hiệu năng.
  • Nhược: Cần quy trình build/sprite hoặc quản lý file SVG.
• Font Awesome:
  • Ưu: Kho icon rất lớn, quen thuộc.
  • Nhược: Tải nặng nếu không tối ưu subset, không cần thiết nếu chỉ dùng vài icon cơ bản.

Khuyến nghị:

• Admin UI: ưu tiên Dashicons (chuẩn WordPress).
• Frontend: ưu tiên SVG; chỉ dùng Dashicons khi muốn đồng bộ nhanh hoặc đã có sẵn.

Lỗi thường gặp và cách khắc phục

• Icon hiển thị ô vuông/trắng:
  • Chưa nạp Dashicons ở frontend: wp_enqueue_style('dashicons').
  • Sai content Unicode khi dùng pseudo-element.
  • CSS ghi đè font-family hoặc content.
• Icon lệch hàng, không thẳng với text:
  • Thêm vertical-align: middle; line-height phù hợp, hoặc bao icon trong inline-flex.
• Màu không đổi:
  • Kiểm tra specificity CSS; thêm selector rõ ràng: .my-btn .dashicons { color: #... }

Câu hỏi thường gặp

• Dashicons có còn được cập nhật không?
  • WordPress vẫn duy trì cho Admin, nhưng bổ sung icon mới không thường xuyên. Với frontend, SVG là hướng hiện đại hơn.
• Có thể tải riêng vài icon Dashicons không?
  • Dashicons là font icon; thường phải tải cả bộ. Nếu cần tối ưu, cân nhắc SVG riêng lẻ.
• Dùng chung Dashicons và SVG được không?
  • Hoàn toàn được. Ví dụ: Admin dùng Dashicons, frontend dùng SVG để tối ưu tốc độ.

Tóm tắt áp dụng nhanh

• Dùng trong Admin: gọi class dashicons dashicons-{tên-icon}.
• Dùng ở frontend: nạp dashicons bằng wp_enqueue_style, sau đó dùng class như trên.
• Pseudo-element: font-family: dashicons; content: "fxxx";
• Tối ưu: nạp có điều kiện, ưu tiên SVG ở frontend, đảm bảo accessibility với screen-reader-text.

Với các bước trên, bạn có thể dùng Dashicons đúng ngữ cảnh, đảm bảo hiệu năng, trải nghiệm người dùng và tiêu chuẩn truy cập, đồng thời tối ưu SEO nhờ UI rõ ràng, nhất quán và nhanh tải.