子比主题美化 – 网站引入阿里巴巴 Iconfont 彩色图标教程 NEW

网站引入阿里巴巴 Iconfont 彩色图标教程

阿里巴巴 Iconfont 矢量图标库，是国内功能强悍、资源海量的专业矢量图标平台。平台支持图标下载、在线管理、格式转换等实用功能，还可直接用 GitHub 账号快捷登录。站内拥有数百万款优质图标均可免费商用使用，官方也配备了完整详细的使用教程，上手简单、省心便捷。

教程

一、新建Iconfont项目

1、点击进入阿里巴巴矢量图标库官网 https://www.iconfont.cn/，界面如下图所示，首先完成账号注册并登录。

2、登录成功后，即可按需搜索挑选所需图标，将用到的图标全部加入购物车。

3、接着把购物车内的图标添加至项目，若暂无项目，可先新建一个专属图标项目。

二、导出 Symbol 代码及接入链接配置

站长推荐大家采用 Symbol 模式接入图标至网站；当然也可参照官方教程，选择其他集成方式。进入刚才创建的图标项目，生成 Symbol 格式接入链接，复制生成好的代码即可。

三、将生成的图标JS代码添加至子比主题文件中完成接入。

1、将下方代码中的链接替换为你刚才复制的 Symbol 链接，然后进入主题设置–>>自定义代码–>>自定义底部HTML代码，粘贴代码并保存设置即可生效。

到这里，阿里巴巴 Iconfont 彩色矢量图标就成功接入网站，所有配置全部完成。接下来即可直接在站点中随心调用使用

四、Iconfont 图标使用方法

1、进入资源管理里的我的项目，找到已添加的图标，复制图标名称ico代码即可。『参考下方图片』

在我的项目中找到已添加的图标并复制图标代码，再参照下方格式替换 href=”#加入你的图标代码” 中的代码，最后将整段代码插入到需要显示图标的位置即可，效果可参考本站导航栏展示样式。

按照下方代码替换href=”#加入你的图标代码” 中的图标代码，将完整代码粘贴到需要显示图标的位置即可使用。

2、重要提示：最后将图标代码添加至导航菜单栏即可

在 WordPress 后台–>>外观 –>>菜单–>>文字前方粘贴添加代码，保存设置即可。

五、可选：给图标添加旋转动画效果

代码部署

将下方代码添加到：网站后台–>>子比主题设置–>>自定义代码–>>自定义 CSS 样式

我们是借助 figure 标签实现图标旋转动画效果。如上图所示，第一个箭头用 figure 标签实现旋转，第二个箭头则为常规图标代码写法。

菜单图标代码

在 WordPress 后台–>>外观 –>>菜单–>>导航名称: 粘贴添加代码，保存设置即可。

------本页内容已结束，喜欢请分享------