平时做项目肯定少不了图标,一些组件自带一些图标,但是可能没有我们需要的,这时候就要借助于强大的阿里图标了。怎么使用呢?
一、font-class方式
1.输入想要搜索的图标名搜索(要先登录账号)
2.将图标加入购物车
3.点击购物车,将图标加入项目,可以新建项目,也可以选择原有的项目
4.加入到项目后,会自动跳转到项目里,展示此项目里所有的图标
5.选择Font class
,然后点击更新代码
6.代码更新完毕后会生成一个链接,将链接复制到浏览器地址栏,复制所有代码
7.在项目src/assets
下新建一个iconfont.css
文件,将复制好的代码粘贴到此文件
8.在main.js
里引入iconfont.css
文件
import '../src/assets/css/iconfont.css'
9.现在就可以在需要的地方使用了
// 普通使用方式, iconfont 是你项目下的 font-family, my-icon-xxx 是图标类名
<span class="iconfont my-icon-xxx"></span>
注意事项:
a.可根据自己使用的组件,按照组件自有方式引入图标,比如vant
,
b.必须加上class="iconfont" class-prefix="my-icon"
其中my-icon
前缀是自己设置的,可以在项目里设置,以便和使用的前端UI自带的前缀区分<van-icon class="iconfont" class-prefix="my-icon" name="shouye" size="0.5rem"></van-icon>
name
是图标名字,可以在iconfont.css
里找到。
好了,这就是阿里图标的使用方式之一,当然还有其它方式,有时间再更新。
重要更新
IE浏览器上可能会不显示。
解决方法:将字体文件下载到本地,引用路径修改为本地的
————————————-更新—————————————
二、Unicode方式
Unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持
IE6+
,及所有现代浏览器。 - 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
1.在项目中拷贝生成的@font-face
// 示例
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
2.定义使用 iconfont
的样式
// 示例
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3.挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
<i class="iconfont"></i>
三、查看官方使用教程
1.打开项目,点击下载至本地
2.解压文件,得到如下图所示文件
3.打开demo_index.html
,里面有图标的三种使用方式