通过前面的20章节,我们完成了wordpress主题trans的开发制作。但是,我们在trans主题的前台页面中,还有一个小细节没有处理,就是前台页面的dashicons字体小图标的调用(如下图)。在wordpress3.8版本前,我们想要在wordpress主题中使用达到dashicons字体小图标的效果,要么使用调用网络字体资源,要么通过图片的形式来实现。wordpress3.8版本以后,就内置了dashicons字体图标的功能,我们只需在wordpress主题开发时,直接调用就可以了。
那么,怎样在wordpress主题中调用dashicons字体小图标呢?
一、调用wordpress自带的dashicons字体样式文件。
wordpress自带的dashicons的样式文件在wp-includescss目录下,所以,我们要在前台页面< 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实在是太强大了?哈哈。
如果喜欢我的文章,那就点击“关注”按钮,来关注我吧。我会每天定时发表新内容。