如何在WordPress中使用Dashicons:分步指南

如何使用特色虚线图标

每个人都会这样。

你找到一个你喜欢的主题,安装它,然后花几个月的时间欣赏你网站的外观。但是,几个月后,这个主题开始变得陈腐。有点无聊。

唯一的问题是,你不想花几个小时寻找新的东西。如果有办法给你的主题增添一点情趣,让它脱颖而出就好了。

在你绝望地举手之前,让我向你展示一种简单的方法来增加你的主题,不需要太多的努力,也不需要添加可能会减慢你网站速度的不必要的图片。

输入Dashicons。Dashicons是WordPress 3.8中引入的字体图标。当你登录到仪表板时,你会看到这些很棒又酷的图标。如果你能把它们也添加到你的主题中,那不是很酷吗?

好吧,你可以,我来教你怎么做。

如何在导航菜单中使用Dashicons?

让我们从一个简单的例子开始。自WordPress 3.8版以来,Dashicons已经包含在WordPress中,但您仍然需要包含它们,以使它们正确显示在站点前端;那就是你的主题。

步骤1:准备好主题Dashicons

要准备好主题Dashicons,请首先打开函数。php文件(在外观>编辑器中找到–默认情况下,它将打开当前主题的CSS文件。继续查找functions.php文件,然后单击它将其加载到编辑器中。)

步骤2:将脚本排队

一直滚动到底部,并在末尾粘贴以下代码行:

//将Dashicons脚本添加操作排队(“wp\U Enqueue\u scripts”、“load\u Dashicons\u front\u end”);函数load\u dashicons\u front\u end(){wp\u enqueue\u style('dashicons');}

好吧现在,您的主题可以使用Dashicons了。

步骤3:将Dashicons添加到菜单项

让我们为您的主页链接添加一个Dashicon。前往Dashicons网站,选择您喜欢的图标。

更新:Dashicons最初在GitHub上可用。io,但它们已在WordPress上提供。组织。

步骤4:

单击所需的图标(在本例中,我选择了主页图标),然后单击复制HTML。它将为您提供一个弹出窗口,其中包含您需要的代码。

使用html添加dashicons

第5步:

返回WordPress仪表板,单击外观>菜单并将代码粘贴到显示导航标签的位置。

dashicons导航

如果仍希望该单词显示,请在右括号后键入。

将dashicons添加到菜单项

单击保存并加载您的主页。您的主页链接现在应该显示一个漂亮、清晰的短划线图标。

您可以对所有导航菜单项执行此操作,也可以仅对主页执行此操作。只需使用匹配的图标重复上述步骤。这很容易,对吧?

如何在post meta中使用Dashicons?

您可以更进一步,将Dashicons添加到您的帖子元中,或者换句话说,在作者的姓名、日期、类别或标签前添加Dashicons;取决于主题及其显示的信息。

由于您已经在主题中加入了DashIcon,现在只需打开样式即可。css文件(或者使用自定义css编辑器,这是一个更好的选项,这样在主题更新后不会丢失更改!),找到匹配的选择器并添加CSS代码。

假设您想在姓名或作者姓名前添加一个图标。

步骤1:

首先,我们要挑选一个我们喜欢的图标。

第2步:

然后单击它,这次选择Copy CSS。同样,它将为您提供一个弹出窗口,其中包含需要粘贴的代码。

使用css添加dashicons

步骤3:

现在打开你的风格。css并找到相应的选择器,在本例中为–。条目作者。通过添加:在粘贴从Dashicons网站复制的CSS代码之前,作者的名字前面会有一个漂亮的图标。您还需要指定使用的是Dashicons字体。修改后的代码如下所示:

.条目作者:{字体系列:“dashicons”;内容:“\f110”}

让我们也添加一些样式,现在完成的代码如下所示:

.条目作者:在{字体系列:“dashicons”;内容:“\f110”;颜色:#f15123;显示:内联块;-webkit字体平滑:抗锯齿;字体:正常20px/1;垂直对齐:顶部;右边距:5px;右边距:0.5rem;}

最终结果

那么这最终会是什么样子呢?

类似这样:

dashicon导航示例

有很多方法可以使用Dashicons–让你的创造力占据主导地位,看看你能做些什么。

把它们放在一起

除了上述示例之外,您可以在后端使用Dashicons为不同的帖子类型指定不同的图标,也可以在帖子标题、小部件标题中使用它们,或者如果您正在创建自定义登录页,则可以区分站点的不同页面。

以下是您可以使用它们创建的基本示例:

dashicons正在使用主页

Dashicons不是唯一可以添加的图标字体类型。查看我们的FontAwesome图标教程了解更多信息.