网站中调用阿里巴巴矢量图标库引用图标教程

1.图标库网址创建账户:https://www.iconfont.cn

2.选择图标管理,创建项目,如图

3.创建项目,创建的时候尽量不要用默认名称,都改成自己的项目名称调用的重复了


4.选择你喜欢的图标,然后添加为购物车,再从顶部购物车按钮添加至您的项目


5.生成第二步骤中提到的生成图标,生成后就得到了Font class单色和Symbol彩色的js代码和css代码。

引用步骤:

第一步:先引入需要调用的js和css代码,放在后台统计代码处就行

柒比贰后台-基本设置-代码统计里面

Font class单色调用css代码

<link rel="stylesheet" href="替换成你的xxx.css调用地址">

Symbol彩色图标调用js代码

<script src="替换成你的xxx.js调用地址"></script>

第二步:加入通用 CSS 代码(引入一次就行)此处当然是加入style.css里面

<style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}</style>

第三步:挑选相应图标并获取类名,应用于页面:

单色调用代码:

<span class="xu icon-xxx"></span>

" xu" 是你创建项目时候填写的 font-family。看下图(很重要)。忘记了可以通过编辑项目查看,后面的icon-xxx,直接复制图标代码替换就行。

彩色调用代码:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use></svg>

彩色和单色有点不同,直接替换icon-xxx就行,直接复制图标代码替换就行。



评论(0)
暂无评论

Hi, 欢迎来到淘码客,分享最专业的互联网开发技术!

Hello,欢迎来咨询~
新手教程 技术支持 微信小程序 回到顶部