如何添加调用矢量图标库

前言

为什么站长要写一篇关于个人网站如何添加调用矢量图标库？因为图标好多，好看！！！

一、矢量图标库账号

如果您已有账号，可以忽略此步骤，如图登录方式有四种，一个是手机号注册登入，一个是Github另外一个是微博，域账号我们用不了，无论哪种都是关联账号，没有注册，选择一种登录即可，站长这边使用手机号注册

image.png

二、搜索喜欢的图标

登入之后我们可以搜索自己喜欢的图标，如首页（home），会出现很多图标

image.png

选择一个自己喜欢的图片。然后选择图标收藏加入图库（就是购物车的图标，也可以收藏起来，如图）

image.png

加入购物车后，右上的角购物车会有提示，点击右上角购物车图标如图

image.png

三、选择添加至项目

点击右侧加号，选择新建项目，输入名称“ahywicon”（名称随意）点击确定，如图

image.png

点击确定后界面会跳转至项目管理，左侧是项目名称，右侧是图标类型有“Unicode”、“Font class”、“Symbol”三种，我们选择如图“Font class”，点击查看在线链接然后点击“暂无代码，点此生成

image.png

预计1秒钟左右，我们就会得到此代码，然后点击右上角项目设置

image.png

四、编辑项目

其中FontClass/Symbol前缀必须使用“font-”，然后Font Family设置“icon”，如图，否则前缀不一样无法使用图标（如需使用彩色图标勾选字体格式彩色选项），如图设置

image.png

之后点击保存按钮，然后项目首页会提示“点击更新代码，默认不再生成 .eot、.svg 和 Base64 格式字体，请到「编辑项目」中配置。” ，点击更新代码

PS：另外还有就是每次添加图标之后都会需要点击此处生成一个新的样式代码。

image.png

阿豪这边使用Zblog的锦鲤主题为例（其他网站将此代码放入head标签里），复制新代码，点击主题设置 >> 广告设置 >> 网页头部接口，如图

image.png

代码格式如下

Markup

<link href="阿里巴巴图标代码" rel="stylesheet">

将“阿里巴巴图标代码”换成刚刚复制好的代码，如上图蓝色区域所示，右侧开启接口，点击底部保存，回到阿里巴巴图标库网站，鼠标放在刚刚设置的图标上，能看见“复制代码”的字样，点击复制代码，如图

image.png

复制之后回到主题，左侧菜单 >> 模块设置 >> 导航栏 >> 在编辑框中添加如下代码

Markup

<li><a href="网站地址"><i class="icon font-home"></i>首页</a></li>

PS:其中网站地址为您的站点地址。“icon”是固定的，后面的font-home才是图标的代码，切记两者缺一不可，然后点击确定。

回到网站首页，查看效果

image.png

最后，可能你会发现，图标安装之后格局有一丢丢的变化，图标大小不统一，因为默认的图标库的16号字体，网站默认使用的是14号字体，打开主题设置 >> 首页设置 >> 自定义css选项 >> 添加如图代码 >> 开启接口即可解决。（其他网站将此css样式加入css表即可）

CSS

i.icon{font-size:inherit;}

五、其他一些细节设置

点击图片会出现如下图编辑功能可以调整图标颜色，大小等等

image.png

六、总结

在矢量图标库新建一个项目，名称自定义，FontClass/ Symbol 前缀设置“font-”，Font Family设置“icon”，每次添加新图标都需要更换一个css代码，把最新的样式代码，放在网站的头部接口了，就可以了，最后把图标的唯一代码复制，粘贴在需要显示图标的位置就可以了。