Dashicons 是一組與 WordPress 捆綁在一起的字體圖標，提供了一種向 WordPress 網站添加圖標的簡單方法。愛掏網 - it200.com自該項目首次推出以來，它已發展成為一種寶貴的資源，包括豐富的 300 多個獨立圖標！
Dashicons 易于使用，涵蓋了大多數圖標需求的用例，因此減少了對第三方圖標庫的需求。愛掏網 - it200.com
有趣的事實：每次您訪問 Dashicons 主頁時，它都會顯示一個隨機圖標！親自嘗試一下。愛掏網 - it200.com
字體圖標正如其聽起來的樣子。愛掏網 - it200.com每個字體圖標集（例如 Dashicons）都是常規字體，就像任何其他字體一樣，但包含符號而不是字母和數字。愛掏網 - it200.com
這使它們易于使用，但 Dashicons 的一個缺點是它們被有效地編譯為單個大精靈（包含所有單獨圖標的排列好的單個大圖像）。愛掏網 - it200.com
正如您可以想象的那樣，圖標集合越大，字體圖標精靈的整體大小也越大。愛掏網 - it200.com即使使用緩存，如果您只需要一兩個圖標，包含每個圖標也并不理想。愛掏網 - it200.com
但是，這并沒有阻止字體圖標在過去幾年中非常流行。愛掏網 - it200.com
好消息是 Dashicons 包含在 WordPress 核心中，因此它們可以開箱即用。愛掏網 - it200.com它們實際上會自動添加到每個 WordPress 管理頁面，因此您無需做太多工作即可使用它們。愛掏網 - it200.com
但是，如果您打算在網站的前端顯示 Dashicons，那么在嘗試使用它們之前需要先將它們排隊。愛掏網 - it200.com
要在網站前端啟用 Dashicons，請將其添加到插件或主題中：
function enable_frontend_dashicons() {
??wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'enable_frontend_dashicons' );
登錄后復制
現在我們已經準備好開始在我們的 WordPress 網站上使用 Dashicons！
現在是您一直在等待的部分！根據您的要求，可以通過幾種不同的方式將 Dashicons 添加到您的網站：
- WordPress 管理菜單中的自定義插件圖標
- 插件設置頁面標記的自定義圖標
- 塊圖標組件
- 前端帖子或頁面內容內的任何位置
為插件創建自定義菜單圖標
如果您正在開發插件，那么您可以利用 WordPress 管理員中隨時可用的 Dashicons，為您的插件顯示自定義菜單圖標，如果您愿意，還可以在插件設置頁面上顯示標題。愛掏網 - it200.com
function htud_add_options_page() {
??add_menu_page(
????'How to use Dashicons',
????'How to use Dashicons',
????'manage_options',
????'how-to-use-dashicons',
????'htud_render_settings_page',
????'dashicons-superhero-alt' // Add Dashicon to menu.
??);
}
add_action('admin_menu', 'htud_add_options_page');
function htud_render_settings_page() {
??// Add Dashicon to settings page title.
?>
????
????
??
??登錄后復制
這就是它在 WordPress 管理員中的樣子：
您還可以在管理菜單中使用 Dashicons 來自定義帖子類型。愛掏網 - it200.com
function custom_post_type() {
??$args = array(
??????'label' => __( 'My Custom Post Type', 'text_domain' ),
??????'show_ui' => true,
??????'menu_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
??);
??register_post_type( 'My Custom Post Type', $args );
}
add_action( "init", "custom_post_type" );
登錄后復制
這會為您的自定義帖子類型添加一個菜單圖標，類似于上面的設置頁面示例。愛掏網 - it200.com
在古騰堡塊中使用 Dashicons
如果您為古騰堡編輯器開發塊，您還可以通過
該組件非常易于使用。愛掏網 - it200.com只需導入它并將其添加到塊中，如下所示：
import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';
export default function Edit() {
return (
登錄后復制
這會將四個指定的 Dashicons 呈現在一行上。愛掏網 - it200.com
檢查代碼會顯示 477c5dc3edaf86ebdbb3f8dc928f52e1 組件輸出的實際標記，該標記是一個與 Dashicons 網站在您選擇圖標并單擊復制 HTML 鏈接時生成的內容結構相同的 span 標記.
使用核心 HTML 塊添加 Dashicons
在您的網站上使用 Dashicons 的另一種方式是通過核心 HTML 塊添加圖標標記。愛掏網 - it200.com這使您能夠直接輸入 Dashicon 標記。愛掏網 - it200.com
在這篇文章中，我解釋了 Dashicons 是什么以及它們在 WordPress 中的工作原理。愛掏網 - it200.com然后，我向您展示了將 Dashicons 包含在您自己的 WordPress 網站或插件中的幾種方法。愛掏網 - it200.com
以上就是在 WordPress 中使用 Dashicons：綜合指南的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！