在Wordpress使用字体图标

网页字体图标的使用大家都不陌生,因其体积小,图标样式丰富,深受前端开发人员的喜爱。但是在目前开源的字体图标中,有许多是我们用不到的图标,所以今天主要是给大家说一说如何自定义字体图标。

一、iconfont

iconfont是国内优秀的字体图标生产地,官网

在Wordpress使用字体图标

在登录账户后,你可以随意搜索你想要的字体图标,鼠标指向任意一个图标,会出现几个选项,对图标可进行三个操作,三个图标分别对应

  • ①添加入库
  • ②收藏
  • ③下载

一般来说,我们需要添加入库,然后在“我的项目”中就会出现刚刚你添加的图标。调用方式有三种

  • Unicode
  • Font class
  • Symbol

你可以根据自己的使用场景,选择最适合你的方式,点击查看具体使用方法

二、icomoon

icomoon是国外的一个字体图标网站,综合了包括:Zondicons、60 Vicons、Feather、Font Awesome、Material Icons等免费字体图标。icomoon有付费跟免费两种模式,对于一般开发者而言,免费已足够使用。使用图标时只需要添加图标库,然后你根据自己所需图标自行添加即可。

在Wordpress使用字体图标大致步骤:

  • ①添加图标库
  • ②Selection icons
  • ③Generate Font

在Generate Font时(也就是下载字体图标文件时)可以根据自己的需求自定义,设置字体名称,class前缀以及对浏览器的支持等。

在Wordpress使用字体图标

tips:icomoon是使用cookie保存历史记录,在你每次下载字体图标的压缩包里会有一个selection.json文件,如果你清除了浏览器缓存,可以通过selection.json这个文件找回你的图标记录,以便于你继续添加或删除某个项目图标。

以上本文结束。