矢量图标库
矢量:不会因为大小而变得模糊,因为本身就是文字类型,所以可以像文字一样操作。
- 1.在搜索框内查找
- 2.找到后加入购物车
- 3.解压后进入文件夹会看到3个demo.html,它会告诉你该如何使用。
下面聊聊其中的一种方法:
symbol引用。demo上说,是未来的主流使用方法,是平台目前推荐的方法。
- 1.第一步,先引入生成的symbol代码
<script src="./font/iconfont.js"></script>//注意路径
- 2.第二步,加入通用css代码(引入一次就行)
字体的颜色,大小都可以在这里修改
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
- 3.第三步,挑选相应图标并获取类名,应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
对应图标的类名也有告诉我们。
总的来说,icon-font的使用只需要复制。其他两种方法也类似。