矢量图标库
矢量：不会因为大小而变得模糊，因为本身就是文字类型，所以可以像文字一样操作。
- 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的使用只需要复制。其他两种方法也类似。
网友评论