在WordPress中使用图标:综合指南

戴世康& # 26159；一组与WordPress & # 25414绑在一起的字体图标，提供了一种向WordPress & # 32593站添加图标的简单方法。自该项目首次推出以来，它已发展成为一种宝贵的资源，包括丰富的300 多个独立图标！

戴世康& # 26131；于使用，涵盖了大多数图标需求的用例，因此减少了对第三方图标库的需求。

有趣的事实：每次您访问大栅栏& # 20027；页时，它都会显示一个随机图标！亲自尝试一下。

什么是字体图标？字体图标正如其听起来的样子。每个字体图标集（例如戴世康& # 65289；都是常规字体，就像任何其他字体一样，但包含符号而不是字母和数字。

这使它们易于使用，但戴世康& # 30340；一个缺点是它们被有效地编译为单个大精灵（包含所有单独图标的排列好的单个大图像）。

正如您可以想象的那样，图标集合越大，字体图标精灵的整体大小也越大。即使使用缓存，如果您只需要一两个图标，包含每个图标也并不理想。

但是，这并没有阻止字体图标在过去几年中非常流行。

在WordPress & # 20013访问大栅栏& # 22909；消息是大栅栏& # 21253；含在WordPress & # 26680心中，因此它们可以开箱即用。它们实际上会自动添加到每个WordPress & # 31649理页面，因此您无需做太多工作即可使用它们。

但是，如果您打算在网站的前端显示戴世康& # 65292；那么在尝试使用它们之前需要先将它们排队。

要在网站前端启用戴世康& # 65292；请将其添加到插件或主题中：

函数enable _ frontend _ dashicons(){ WP _ enqueue _ style(‘ dashicons ‘)；} add _ action(‘ WP _ enqueue _ scripts ‘，’ enable _ frontend _ dashicons ‘)；现在我们已经准备好开始在我们的WordPress & # 32593站上使用戴世康& # 65281；

如何显示大栅栏& # 29616；在是您一直在等待的部分！根据您的要求，可以通过几种不同的方式将戴世康& # 28155；加到您的网站：

WordPress & # 31649理菜单中的自定义插件图标插件设置页面标记的自定义图标块图标组件前端帖子或页面内容内的任何位置为插件创建自定义菜单图标如果您正在开发插件，那么您可以利用WordPress & # 31649理员中随时可用的戴世康& # 65292；为您的插件显示自定义菜单图标，如果您愿意，还可以在插件设置页面上显示标题。

函数htud _ Add _ options _ page(){ Add _ menu _ page(‘如何使用大图标’，’如何使用大图标’，’ manage_options ‘，’如何使用-大图标’，’ htud_render_settings_page ‘，’大图标-超级英雄-alt’ //将大图标添加到菜单。);}add_action(‘admin_menu ‘，’ htud _ add _ options _ page ‘)；function htud _ render _ settings _ page(){//在设置页面标题中添加大图标。？& gt& ltdiv class = ” wrap ” style = ” display:flex；对齐-项目:基线；”& gt& ltspan class = ” dashicons dashicons-admin-site ” >& lt/span&gt。& lth1 class=”heading ” >& lt？php _e(‘设置页面’，’文本域’)；？& gt& lt/h1 & gt；& lt/div & gt；& lt？php } & # 36825就是它在WordPress & # 31649理员中的样子：

您还可以在管理菜单中使用戴世康& # 26469；自定义帖子类型。

function custom _ post _ type(){ $ args = array(‘ label ‘ = & gt；__(‘我自定义帖子类型’，’ text_domain ‘)，’ show _ ui ‘ = & gttrue，’ menu _ icon ‘ = & gt’ Dashicon-drumstick ‘，//将Dashicon添加到自定义文章类型菜单。);register_post_type(‘我的自定义帖子类型’，$ args)；}add_action( “init “，” custom _ post _ type “)；这会为您的自定义帖子类型添加一个菜单图标，类似于上面的设置页面示例。

在古腾堡块中使用大栅栏& # 22914；果您为古腾堡编辑器开发块，您还可以通过& ltdashicon/>；组件直接在代码中使用戴世康& # 12290；

该组件非常易于使用。只需导入它并将其添加到块中，如下所示：

从“@wordpress/block-editor”导入{ useBlockProps }；从“@wordpress/components”导入{ Dashicon }；导出默认函数Edit(){ return(& lt；部门{…useBlockProps()} & gt；& ltDashicon icon= “商人”/&gt。& ltDashicon icon=”awards” />& ltDashicon icon=”pets” /&gt。& ltDashicon icon=”heart” /&gt。& lt/div & gt；);}这会将四个指定的戴世康& # 21576；现在一行上。

检查代码会显示& ltdashi cons/& gt；组件输出的实际标记，该标记是一个与戴世康& # 32593；站在您选择图标并单击复制HTML & # 38142接时生成的内容结构相同的span & # 26631记。

使用核心HTML & # 22359添加大栅栏& # 22312；您的网站上使用戴世康& # 30340；另一种方式是通过核心HTML & # 22359添加图标标记。这使您能够直接输入大世界& # 26631；记。

要在前端运行此功能，您必须按照前面所述手动将大世界& # 23383；体排入队列。结论在这篇文章中，我解释了戴世康& # 26159；什么以及它们在WordPress & # 20013的工作原理。然后，我向您展示了将大栅栏& # 21253；含在您自己的WordPress & # 32593站或插件中的几种方法。

以上是使用Dashicons的细节:WordPress中的综合指南。更多请关注草根吧VPS其他相关文章！

：在WordPress中使用图标:综合指南 https://vps.caogenba.com.com/94867.html