WP主题开发21：wordpress主题怎样调用dashicons字体图标？

通过前面的20章节，我们完成了wordpress主题trans的开发制作。但是，我们在trans主题的前台页面中，还有一个小细节没有处理，就是前台页面的dashicons字体小图标的调用（如下图）。在wordpress3.8版本前，我们想要在wordpress主题中使用达到dashicons字体小图标的效果，要么使用调用网络字体资源，要么通过图片的形式来实现。wordpress3.8版本以后，就内置了dashicons字体图标的功能，我们只需在wordpress主题开发时，直接调用就可以了。

那么，怎样在wordpress主题中调用dashicons字体小图标呢？

一、调用wordpress自带的dashicons字体样式文件。

wordpress自带的dashicons的样式文件在\\wp-includes\\css目录下，所以，我们要在前台页面< head>头部代码的wordpress主题样式文件style.css的前面插件如下代码：

<link rel="stylesheet" href="<?php bloginfo("wpurl"); ?>/wp-includes/css/dashicons.css">

一定要把这个调用代码放在style.css调用的前面（如下图），反之，dashicons.css会有可能影响到style.css样式的实现。

二、在wordpress主题前台页面调用dashicons字体小图标。

在wordpress主题的代码中调用dashicons字体小图标，都是通过dashicons.css提供的元素class类来实现的，可以通过以下2种方式来实现。

方法1：当前标签元素自己添加dashicons的class类。

这种方法，必须使用dashicons-before这个class类，意思是“在当前元素前面使用dashicons字体小图标，然后，再添加一个dashicons小图标类。如：

<p class="dashicons-before dashicons-visibility">眼睛</p>

这里，我先添加dashicons-before类，再添加了一个眼睛的图标类dashicons-visibility，一般用于页面浏览量。

方法2：当前元素内部添加子元素，给子元素添加dashicons类。

也就是在当前元素的内容前面添加一个子元素，然后台给这个子元素调用dashicons字体小图标。如：

<p><span class="dashicons dashicons-smiley"></span>笑脸</p>

这里，dashicons是dashicons小图标的全局样式，dashicons-smiley是笑脸小图标类，页面会显示一个笑脸。

三、手动修改dashicons字体小图标的样式。

有时候，我们可能有不同的需求，想让这些dashicons小图标变大一点，或者改变一下它们的颜色。怎样么修改呢？其实很简单，因为这些dashicons是字体，不是图片，所以，我们可以像修改字体样式一样，来修改这些dashicons小图标的样式。当然，是在我们自己创建的style.css样式文件中修改，而不是去修改dashicons.css文件，这就是为什么在< head>中要把dashicons.css调用放在前面的原因。如：

.dashicons-smiley{ color:red; font-size:20px; }

上句，就是把笑脸小图标的颜色改成了红色，大小改成了20像素。

四、dashicons字体小图标大全。

为了方便大家在wordpress主题开发中使用dashicons字体小图标，这里，我们把dashicons提供的所有字体小图标的class类及样子展示给大家。

因为代码太多，所以，这里就提供一个地址：http://wanlimm.com/77202006308789.html （如下图所示）。

通过上面的介绍，相信大家已经知道“如何在wordpress主题代码中调用wordpress自带的dashicons字体小图标”了，这样，我们就不需要再去调用其它的网络提供的小图标了，是不是觉得wordpress实在是太强大了？哈哈。

如果喜欢我的文章，那就点击“关注”按钮，来关注我吧。我会每天定时发表新内容。

wordpress自定义菜单li标签class样式自定义

这篇文章还是讲的是wordpress自定义菜单的调用，上一篇文章介绍了a标签Class和data数据的添加，下面跟大家分享li标签样式的修改。

li标签默认有class样式menu-item

同样可以在wordpress主题函数function.php中加入代码来实现。

functiontayuntheme_menu_classes($classes,$item,$args){
if($args->theme_location=='main'){//这里的main是菜单id
$classes[]='nav-item';//这里的nav-item是要添加的class类
}
return$classes;}add_filter('nav_menu_css_class','tayuntheme_menu_classes',1,3);

只需要修改上面代码中的菜单ID和class就可以了。

加上之前讲的a标签class和data数据的添加，基本上可以解决任何菜单的调用了。