架构师

您现在的位置是:首页 > 技术博客 > 开发环境

开发环境

阿里巴巴矢量图标库Iconfont使用教程

架构师小跟班 2020-09-30 开发环境
阿里巴巴矢量图标库Iconfont使用教程阿里巴巴矢量图标库目前已经收录的将近一千万的图标,如此庞大的资源库几乎能够满足不同行业的不同需求,同时网站还支持图标定制,只打包自己

阿里巴巴矢量图标库Iconfont使用教程

阿里巴巴矢量图标库目前已经收录的将近一千万的图标,如此庞大的资源库几乎能够满足不同行业的不同需求,同时网站还支持图标定制,只打包自己想要的图标导入自己的项目。

站点地址:https://www.iconfont.cn

使用方法:

第一步:注册帐号,目前只支持GitHub和新浪微博授权登录。

第二步:新建项目。

点击导航栏中的“资源管理”,“我的项目”,然后点击“新建项目”。

在弹出的页面中填写以下信息即可:

注意:

根据每个项目的实际要求填写FontClass/Symbol 前缀和Font Family。比如架构师导航站点使用的WordPress主题就要求这两项中必须输入:io,前后不能有空格,且前缀加中横线。

第三步:添加图标到项目

点击导航栏中的“图标库”,任意选择一个进入

看到合适的图标后,鼠标悬浮点击加入购物车,

然后在购物车这里就会看到添加图标数目,

点击购物车,选择项目,点击“添加至项目”,确定即可。

第四步:生成代码(每次添加新图标都要生成一次)

如果是第一次生成,显示的是“暂无代码,点此生成”。

第五步:复制代码到主题。

点击上图中的“点此复制代码”,复制成功。在WordPress后台主题设置>其他功能>阿里图标地址中粘贴保存。

第六步:在菜单中使用。

添加图标字体需要将菜单高级属性打开,登录WP后台→外观→菜单,进入菜单编辑管理页面,打开右上角的”显示选项“,勾选其中全部的“CSS类”,如图:

返回已建好的图标字体库页面,用鼠标复制图标代码,例如:io-zhuti

添加到菜单项目的CSS类中,前面必须加一个io,最终如:io io-zhuti,如图:

最后不要忘记保存菜单。

Iconfont有些图标字体大小不一,同一个字体库的偶尔也是如此,还好Iconfont提供了非常方便的编辑工具,可以自己调整大小、旋转等编辑操作。



文章评论