Dashicons WordPress: Hướng dẫn đầy đủ 2025 – Cách dùng, tối ưu và thay thế bằng SVG

Dashicons là bộ biểu tượng (icon font) được WordPress đóng gói sẵn, dùng nhiều trong khu vực quản trị, Gutenberg/Block Editor và cả giao diện người dùng. 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 nhúng đúng chuẩn, tối ưu hiệu năng, đảm bảo truy cập (a11y), cũng như lộ trình thay thế hiện đại bằng SVG để cải thiện Core Web Vitals.

Dashicons là gì?

• Là bộ icon font mặc định đi kèm WordPress, nằm trong gói wp-includes/fonts/dashicons.* và stylesheet dashicons.css.
• Ưu điểm: nhẹ, có sẵn trong core, dễ dùng với class CSS (ví dụ: dashicons dashicons-admin-home).
• Hạn chế:
  • Đây là icon font (phụ thuộc vào tải font), có thể mờ trên màn hình HiDPI, khó tinh chỉnh.
  • Không còn bổ sung biểu tượng mới đáng kể từ WordPress 5.5, hệ sinh thái chuyển dần sang SVG.

Khi nào nên dùng Dashicons?

• Dùng nhanh trong Admin: nút, metabox, menu, setting pages, block editor UI.
• Dùng trên Front-end khi:
  • Bạn chỉ cần vài icon cơ bản và muốn tránh cài thêm thư viện.
  • Bạn chấp nhận đặc tính của icon font (không cần tuỳ biến phức tạp).
• Không nên dùng nếu:
  • Bạn cần nhiều icon, tuỳ biến màu/độ dày/dạng nét linh hoạt.
  • Bạn đang tối ưu Lighthouse/CLS nghiêm ngặt và muốn loại bỏ icon font.

Cách nhúng Dashicons trên Front‑end

Mặc định Dashicons chỉ tải cho người dùng đã đăng nhập. Nếu cần dùng ngoài front‑end:

• Nhúng stylesheet:
  • Thêm vào functions.php của theme hoặc plugin:
    • wp_enqueue_style( 'dashicons' );
• Gợi ý đảm bảo chỉ load khi cần:
  • Kiểm tra điều kiện (ví dụ chỉ trang có nút cần icon): if ( is_page( 'lien-he' ) ) { wp_enqueue_style( 'dashicons' ); }

Cách hiển thị biểu tượng bằng CSS class

• Cấu trúc cơ bản: thêm class dashicons và tên icon, ví dụ:
  • Nút quay về trang chủ: thêm class dashicons dashicons-admin-home vào phần tử.
• Tuỳ chỉnh kích thước/màu:
  • Kích thước: thay đổi font-size của phần tử.
  • Màu: thay đổi CSS color (icon font kế thừa màu chữ).

Ví dụ tối giản (không cần code block): tạo thẻ <span class="dashicons dashicons-search"></span> để hiển thị biểu tượng tìm kiếm.

Dùng trong Gutenberg/Block Editor và trang quản trị

• Nhiều block và menu admin đã tích hợp sẵn Dashicons.
• Khi xây dựng plugin hoặc custom block:
  • Có thể đặt icon của block bằng Dashicons (tên slug icon).
  • Trong menu admin (sử dụng add_menu_page), tham số $icon_url chấp nhận slug Dashicons với tiền tố dashicons-.

Tối ưu hiệu năng khi dùng Dashicons

• Chỉ load khi cần: tránh enqueue trên toàn site.
• Vô hiệu hoá nơi không dùng:
  • Dùng wp_dequeue_style( 'dashicons' ) ở các trang không cần, hoặc loại khỏi người dùng ẩn danh nếu bạn đã thay thế bằng SVG.
• Giảm tác động đến Core Web Vitals:
  • Tránh dùng icon font cho icon lớn/trang chủ đông traffic.
  • Ưu tiên inline SVG cho icon quan trọng trên màn hình đầu (above-the-fold).
• Tránh nháy icon (FOIT/FOUT):
  • Nếu buộc dùng font, bảo đảm font tải nhanh, cấu hình cache tốt, bật HTTP/2 và CDN.

Truy cập (Accessibility)

• Icon chỉ mang tính trang trí:
  • Thêm aria-hidden="true" vào phần tử chứa icon.
• Icon có nghĩa (biểu đạt chức năng):
  • Kèm văn bản ẩn cho trình đọc màn hình (ví dụ thêm <span class="screen-reader-text">Mở menu</span>).
• Chú ý tương phản màu sắc:
  • Bảo đảm icon đủ tương phản với nền theo WCAG (khi icon mang thông tin).

Thay thế hiện đại: chuyển từ Dashicons sang SVG

Vì sao nên chuyển sang SVG?

• Nét sắc, co giãn vô hạn, tuỳ biến màu/nét dễ dàng.
• Không phụ thuộc vào tải font, giảm FOIT/FOUT.
• Nhúng inline SVG giúp giảm request và tối ưu LCP/CLS.

Cách chuyển nhanh:

• Bước 1: Liệt kê icon đang dùng (slug dashicons-...).
• Bước 2: Chọn bộ SVG tương đương (Heroicons, Material Symbols, Tabler Icons, v.v.).
• Bước 3: Thay các thẻ Dashicons bằng inline SVG hoặc SVG sprite.
• Bước 4: Xoá wp_enqueue_style( 'dashicons' ) ở nơi không còn dùng.
• Bước 5: Kiểm tra lại Lighthouse, CLS, a11y.

Mẹo kỹ thuật:

• Dùng SVG sprite để gom icon vào một file, tham chiếu bằng <use>.
• Với icon động (hover/active), thay đổi bằng CSS fill/stroke.

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

• Icon không hiển thị:
  • Chưa enqueue dashicons cho người dùng ẩn danh.
  • CSS lớp dashicons thiếu hoặc bị override.
  • Font bị chặn do CORS/CDN; kiểm tra network và header.
• Icon hiển thị hình vuông/ô trống:
  • Sai tên slug icon.
  • Font không tải được (404, MIME sai).
• Icon nháy khi tải:
  • Tối ưu cache/HTTP/2.
  • Cân nhắc inline SVG cho icon trong viewport đầu.
• Mất a11y:
  • Quên aria-hidden với icon trang trí.
  • Thiếu văn bản thay thế cho icon chức năng.

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

• Dashicons còn được WordPress cập nhật không?
  • Không còn thêm icon mới đáng kể sau WP 5.5; xu hướng là SVG.
• Có nên dùng Dashicons trên website mới?
  • Chỉ nên dùng khi cần nhanh và ít icon. Với dự án mới chú trọng hiệu năng, ưu tiên SVG.
• Có thể dùng Dashicons cùng Font Awesome/Material Icons?
  • Được, nhưng cân nhắc trọng lượng tải. Tránh chồng chéo nhiều bộ icon.

Checklist nhanh

• [ ] Thực sự cần Dashicons? Nếu không, dùng SVG.
• [ ] Chỉ enqueue dashicons ở trang cần.
• [ ] Đảm bảo a11y: aria-hidden hoặc văn bản thay thế.
• [ ] Kiểm tra hiệu năng trên Lighthouse/Core Web Vitals.
• [ ] Lập kế hoạch chuyển sang SVG cho tương lai.

Kết luận

Dashicons vẫn hữu ích cho các trường hợp đơn giản, đặc biệt trong Admin. Tuy nhiên, để tối đa hoá hiệu năng và trải nghiệm người dùng, SVG là lựa chọn hiện đại hơn trên Front‑end. Hãy áp dụng chiến lược “chỉ tải khi cần” và xây dựng lộ trình chuyển dần sang SVG để đạt điểm SEO và Core Web Vitals tốt hơn.