WordPress 开发之使用WordPress 3.8+后台图标（dashicons）
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，感谢原作者。
腾讯云开发者
