WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

伴随着WordPress 3.8 的新界面,WordPress 官方为后台UI 引进了目前贼流行的webfont(又称 icon font),官方独立项目名为dashicons。webfont 本质上是图标——通过字体文件作为载体的矢量图,好处就是,可以比较方便自由修改大小、颜色等字体样式且不像图片那样放大会失真——所以说乔布斯炒起来的retina 屏幕不在话下了。那么,如果你是WordPress 开发者,你可以通过以下方式在你开发的主题或插件中使用WordPress 3.8+后台图标(dashicons)。

Dashicons 与WordPress 3.8

Dashicons 最初是集成在MP6 插件上的,但后来独立成一个项目托管在Github上,然后就是随着MP6集成在WordPress 3.8 新后台UI 上而更为开发者熟知。

Dashicons 项目主页:http://melchoyce.github.io/dashicons/

在WordPress 主题或插件中加入Dashicons 的图标

如果你是在开发WordPress 主题或插件需要像WordPress 仪表盘左侧那样的图标的,或者说需要引用这些图标,那么可以通过下面的方法使用:

加载Dashicons的样式表

先用WordPress 的wp_enqueue_scripts 函数加载样式

add_action( 'wp_enqueue_scripts', 'dw_load_dashicons' ); function dw_load_dashicons() { wp_enqueue_style( 'dashicons' ); }

特殊点的情况,你想在你开发的WordPress 主题前台加载,代码可以是类似这样:

add_action( 'wp_enqueue_scripts', 'themename_scripts' ); function themename_scripts() wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' ); }

使用这些图标

加载好了,那么久该使用需要的图标了。Dashicons 在前端的设计上是通过 :before :after 这两个伪类来调用的,类似下面的代码:

.paintbrush-link:before { font-family: "dashicons"; content: "\f100"; }

具体使用方法的话直接去Dashicons 项目主页,找到需要的图标,点击copy 相关css代码,html代码即可:

成功的话前端显示效果:

在独立项目中使用Dashicons 的图标

如果你不是通过WordPress 这个平台开发项目,但也想使用,怎么办?很容易,去下载MP6 插件,然后揪出里面有关Dashicons 的资源(CSS文件、字体文件),然后在项目中引用:

<link rel="stylesheet" href="css/dashicons.css">

当然,路径神马的注意修改下,然后就跟之前说的,点击copy 相关css代码,html代码即可。

后记

Webfont 这货随着扁平化的趋势越来越流行了,本站的主题Devework 主题也早就赶脚使用上了,不妨看看文章标题下面的小图标就是Webfont 弄的,不过Jeff 是采用Fontello 的图标。Fontello 的图标好处就是可以按需使用,该用的就集中在一起,不多加载;推荐使用这个。当然,Dashicons 的图标也不错,唯一不足是数量目前过少。

本文参考自:jameskoster,感谢原作者。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏姬小光

姬小光前端兴趣班【第009期】- 切图大法之代码的整理

上一期我们已经学会了使用 PS 切图并生成网页,那么这一期我们看看生成后的代码如何处理,才能变成一个合格的网页。

13730
来自专栏全栈数据化营销

不用代码,10分钟会采集微博、微信、知乎、58同城数据和信息

 学会信息和数据快速采集都是非常必要的,因为这能大大提高工作效率。在学会python和火车头之前,web scraper是我最常用的采集工具了,设置简单,非常高...

54290
来自专栏编程

滴滴开源基于 Vue.js 的移动端组件库 cube-ui

综合自:https://didi.github.io/cube-ui/ ? 继 6 月份开源Android 端插件化框架 VirtualAPK后,滴滴近日又开源...

48300
来自专栏强仔仔

利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的...

29070
来自专栏知晓程序

零基础学开发,她做了款「仿知乎」小程序 | 实战教程

20950
来自专栏互联网杂技

10个顶级的CSS3代码生成器

新出来的在线工具和web应用允许开发人员快速创建网站,而无需手动一行一行地编写代码。当前,不断有新的框架和代码库涌现在前端开发这个领域里。 但是,这也让许多开发...

45860
来自专栏ytkah

如何设置dedecms自定义表单必填项?

  用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户。那...

31660
来自专栏前端布道

Angular开发实践(八): 使用ng-content进行组件内容投射

在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css)。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性...

47580
来自专栏web前端教室

MVVM - 遇见未来

MVVM是新的前端开发模式,它的全称是Model View ViewModel,据说最初是由微软提出来的,。。 这种模式的实现,大意上是用自定义的标签把数据绑定...

21270
来自专栏编程微刊

Font Awesome 一套绝佳的图标字体库和CSS框架

21830

扫码关注云+社区

领取腾讯云代金券