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,感谢原作者。
- salt-ssh批量操作记录
- 用AutoHotKey建立自己的便签本
- Flash/Flex学习笔记(14):制作涂鸦板
- 页面布局的一些心得
- Linux下的计算命令和求和、求平均值、求最值命令梳理
- 网卡自适应带来的麻烦
- silverlight:手写板/涂鸦/墨迹/InkPresenter示例程序
- Linux下日志文件监控系统Logwatch的使用记录
- .net中使用oracle数据库分页的土办法
- 图表的一些资源
- 删除文件后,磁盘空间没有释放的处理记录
- silverlight:ListBox中如何取得DateTemplate/ItemsPanelTemplate中的命名控件?
- 表格效果2
- Linux终端复用神器-Tmux使用梳理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- centos7.x 部署主、从DNS服务器问题
- Linux查看History记录加时间戳的小技巧
- Trash-Cli:Linux上的命令行回收站工具
- Linux中的tcpdump命令示例详解
- Linux系统文件的默认权限和特殊权限
- 如何判断一个对象是不是数组
- Linux使用NetworkManager随机生成你的MAC地址
- CentOS6.5下搭建文件共享服务Samba的教程
- ES5中的继承
- Linux定时自动删除旧垃圾文件的Autotrash工具
- Thinking in DAX with PowerBI - 逻辑框架 - 计算逻辑
- Linux并发执行很简单,这么做就对了
- 一条命令让你明白shell中read命令的常用参数
- 防抖与节流
- 一道题理解Linux中sort命令的多个参数