用阿里矢量图标库给网站的导航菜单添加图标

  • A+
所属分类:建站相关

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

1.进入阿里巴巴适量图标库官网

官网:https://www.iconfont.cn/ 注册登录这些就不讲了

点击我的项目

用阿里矢量图标库给网站的导航菜单添加图标

点击新建项目

Font Family 这个很重要,如图所示,可以改成自己的前缀,然后再点新建就好了

用阿里矢量图标库给网站的导航菜单添加图标
用阿里矢量图标库给网站的导航菜单添加图标

到搜索框搜索图标

比如我输入首页会得到下图

用阿里矢量图标库给网站的导航菜单添加图标

点击添加入库

用阿里矢量图标库给网站的导航菜单添加图标

点击右上角购物车图标

添加至项目刚刚新建的项目 test

用阿里矢量图标库给网站的导航菜单添加图标
用阿里矢量图标库给网站的导航菜单添加图标

点击生成代码

这里每个项目生成的都不一样,要换成自己的

用阿里矢量图标库给网站的导航菜单添加图标

2.到 wordpress 后台添加代码

注意这里有多种方式添加这段代码

1.如果主题支持添加网站头部代码,直接在那里添加如下代码, 注意换成自己的代码

2.主题没有添加头部代码的功能,在外观→编辑→header.php→注意换成自己的代码

<link rel='stylesheet' href='//at.alicdn.com/t/font_1017406_koaub5cmsj.css'>

3.给菜单添加图标

在导航标签输入以下代码保存即可在自己网站首页看到图标效果

<i class="iconfont te-yemian">首页</i>

class 里面的两个值(iconfont 和 te-yemian)iconfont 是你创建项目时的 Font Family, te-yemian 则是图标代码

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

私密评论