iconfont图标引入方法
图标库链接
阿里巴巴矢量图标库链接: https://www.iconfont.cn/.
使用方式
1.搜索需要的图标
2.将喜欢的图标添加到购物车
3.打开购物车
引入方式
添加至项目
1.1 加入项目
1.2.创建项目
2.3 选Font class(默认)下载至本地
2.4只解压当前四个文件到文件目录下(建一个新文件夹装)
2.5通过import进行导入到index.css文件中
import './assets/fonts/iconfont.css'
2.6使用
<p class="iconfont icon-hanbao"/>
下载素材
>>>>>>>>
1.svg
1.1直接放入html中
<body>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon"
width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4ea2a"
d="M486 234.5c5.4 5.6 18.5 8.9 29.3 7.5s15.2-7.1 9.8-12.6c-5.4-5.6-18.5-8.9-29.3-7.5-10.9 1.4-15.2 7-9.8 12.6zM652.2 236.2c10.1-4 13-10.5 6.4-14.6s-20.1-4.2-30.2-0.2c-10.1 4-13 10.5-6.4 14.6s20.1 4.2 30.2 0.2zM582.5 200.7c7.9-2.6 7.3-9.3-1.5-15-8.8-5.6-22.3-8.1-30.2-5.5s-7.3 9.3 1.5 15 22.3 8.1 30.2 5.5zM475.7 174.6c-10.9 0-23.5 5-28.1 11.2s0.4 11.3 11.3 11.3 23.5-5 28.1-11.2c4.6-6.2-0.4-11.2-11.3-11.3zM402.8 216.6c5.4-5.9 1.2-11.4-9.4-12.3-10.6-0.8-23.7 3.3-29.1 9.2s-1.2 11.4 9.4 12.3c10.7 0.9 23.7-3.2 29.1-9.2zM525 803.7c5.4-5.6 1-11.2-9.8-12.6-10.8-1.4-23.9 2-29.3 7.5-5.4 5.6-1 11.2 9.8 12.6s23.9-1.9 29.3-7.5zM622 797.1c-6.6 4.1-3.7 10.7 6.4 14.6 10.1 4 23.6 3.9 30.2-0.2s3.7-10.7-6.4-14.6c-10.1-4-23.7-3.9-30.2 0.2zM552.3 837.9c-8.8 5.6-9.4 12.3-1.5 15 7.9 2.6 21.5 0.2 30.2-5.5 8.8-5.6 9.4-12.3 1.5-15s-21.4-0.1-30.2 5.5zM447.6 847.3c4.6 6.2 17.2 11.2 28.1 11.2s15.9-5.1 11.3-11.3-17.2-11.2-28.1-11.2-16 5.1-11.3 11.3zM364.3 819.5c5.4 5.9 18.5 10.1 29.1 9.2 10.6-0.8 14.9-6.3 9.4-12.3-5.4-5.9-18.5-10.1-29.1-9.2-10.6 0.9-14.8 6.4-9.4 12.3z" />
<path fill="#f4ea2a"
d="M923.6 595.7c-5.9-5.1-13.1-7.7-20.8-8 3.9-11.6 5-24.5 2.1-37.4-3.6-16.2-13.9-33.3-32.3-44 20.3-9.6 28.6-21.9 31.9-37.5 0.1-0.5-0.1-1 0-1.6 7.1-0.7 13.6-3.3 19.1-8.1 12-10.2 16.5-28.5 11.4-46.4-6.3-22.4-24.8-39.1-50.4-46.8C873 241.6 717.8 108.7 512.7 108.7c-72.9 0-144.7 17.5-207.7 50.6-8.8 4.6-12.2 15.5-7.6 24.3s15.5 12.2 24.3 7.6c57.9-30.4 123.9-46.4 191-46.4 179.1 0 320.5 113.3 335.7 217.8H177c5.3-37.1 26.3-75.5 60.6-110 7-7.1 6.9-18.5-0.1-25.5s-18.5-6.9-25.5 0.1c-43 43.3-67.9 93.1-71.6 141.4-18.2 8.1-50.6 25.8-53.2 51.8-1.1 10.3 2 25.4 22.8 38.7 7.6 4.8 14.9 8 22 10 2.1 10.4 12.7 23.6 45.9 35.3l-58.2 80.1c-1.7 2.4-2.6 5.1-3 7.9-2.2 1.2-4.4 2.2-6.7 3.6-20.8 13.3-23.9 28.4-22.8 38.7 2.6 25.8 34.5 43.5 52.8 51.6 4.2 77.1 53 229.1 372.7 229.1 83.1 0 154.1-10.7 211-31.9 9.3-3.5 14.1-13.8 10.6-23.2-3.5-9.3-13.9-14.1-23.1-10.6-52.8 19.6-119.6 29.6-198.4 29.6-206.8 0-325.3-66-336.2-186.4h672.3c-3.3 32.8-16.6 73.9-55.7 109.1-7.4 6.7-8 18-1.3 25.4s18 8 25.4 1.3c41.2-37.2 64.3-85.4 67.8-139.9 25.4-7.7 43.7-24.4 50-46.7 5-17.9 0.5-36.1-11.5-46.4zM180.7 467c3.6-1 7.1-2 10.5-3 10.8-3.2 22-6.5 34.3-7.6 29.1-2.7 49.1 2.6 66.9 7.2 21.6 5.6 43.9 11.5 70.5-2.6 32.3-17.2 85.7-11.4 98.3-3.7 44.3 27.1 84.6 11.1 108.7 1.5 6-2.4 11.6-4.6 15.2-5.3 12.6-2.6 25.1 2 41 7.9 15.8 5.8 33.9 12.5 55.6 12.5 12.8 0 26.9-2.3 42.4-8.6 50.7-20.5 62.1-16.5 80.9-9.8 26.9 9.6 45.8 7.9 59.5 6.7 1.7-0.2 3.1-0.3 4.5-0.4-8 33.5-193.7 37.3-392.9 36.7-194.9-0.7-268.4-19.7-295.4-31.5z m646.7 63.4c1.4 0.4 2.8 1 4.4 1.1 20.5 0.8 34.4 10.5 37.9 26.6 3 13.4-2.2 27-12.4 32.3-0.8 0.4-1.4 1.2-2.1 1.7-12.7-0.7-28.8-0.3-50.1 7.3-18.8 6.7-30.2 10.7-80.9-9.8-41.8-16.9-73-5.4-98 3.9-15.9 5.9-28.3 10.5-41 7.9-3.6-0.8-9.2-3-15.2-5.3-7.1-2.8-15.7-6.1-25.3-8.8 144.8-23 239.3-45.5 282.7-56.9zM123 423.8c2.1-6.1 20.9-18.4 38.6-25.2 0.1 0 0.1-0.1 0.1-0.1h704.1c24.4 4.1 31.8 16.9 33.8 22.3 2.2 6 1.1 10.2 1.2 10.5-0.4 0.2-1.9 0-4.4-1.2-12.6-5.8-24.1-4.9-35.2-3.8-12.2 1.1-24.7 2.2-44.3-4.7-29.3-10.4-49.3-12.8-106.5 10.4-28.8 11.6-48.8 4.3-72-4.3-18.7-6.9-38-14-60.8-9.4-6.7 1.4-13.7 4.2-21.2 7.1-22.4 8.9-47.7 18.9-76.7 1.2-24.2-14.7-91-20.1-133.9 2.6-13.6 7.2-23.5 5.1-44.5-0.4-19.6-5.1-44.1-11.5-79.3-8.2-15.8 1.5-29.3 5.4-41.1 8.9-23.3 6.8-35.2 9.7-51.7-0.9-4.3-2.8-5.8-4.8-6.2-4.8z m90.7 92.2c0.4-0.5 0.4-1.1 0.7-1.6 51.2 11.3 132.7 19.6 261.6 20.1 12.9 0 25.3 0.1 37.4 0.1 50.4 0 94.3-0.4 132.6-1.3-33.5 6.3-71 12.8-112.7 19.4-154.9 24.4-300.6 25.8-364.4 25.1l44.8-61.8z m243.7 83.2c-10.2 4.1-31.1 7-53 5.3 17.3-1.5 35-3.3 53-5.3z m442.4 34.9c-2.1 5.5-9.6 18.7-34.8 22.6-0.2 0-0.4 0.2-0.6 0.2H162.6c-0.3-0.1-0.5-0.4-0.9-0.6-17.7-6.7-37.3-19.6-38.8-24.3 0 0 1-2.2 6.5-5.7 16.5-10.6 28.4-7.8 51.7-0.9 11.9 3.5 25.3 7.5 41.1 9 35.4 3.3 59.7-3.1 79.3-8.2 21-5.5 30.9-7.7 44.6-0.4 43 22.8 109.8 17.3 133.9 2.6 28.9-17.6 54.3-7.6 76.7 1.3 7.5 3 14.5 5.7 21.2 7.1 22.7 4.7 42.1-2.4 60.8-9.4 23.2-8.6 43.2-15.9 72.1-4.3 57.1 23.1 77.2 20.7 106.5 10.4 19.5-7 32.1-5.8 44.3-4.7 11.1 1 22.6 2 35.2-3.8 2.4-1.1 3.8-1.3 3.7-1.6 0.4 0.7 1.4 4.9-0.7 10.7z" />
<path fill="#f4ea2a"
d="M256.7 220.8c2.9 1.7 6.1 2.6 9.2 2.6 5.2 0 10.3-2.3 13.8-6.4 7.2-6.9 7.5-18.3 0.6-25.5s-18.3-7.5-25.4-0.6c-1.2 1.1-3.6 3.8-4.4 5.2-5.1 8.6-2.4 19.6 6.2 24.7z m14.6-12.7l-0.7-0.4-3.3-3.7 4 4.1z" />
</svg>
</body>
效果:
1.2 当图片文件引入(css,object类似)
<body>
<img src="./hanbao.svg">
</body>
注: 作为普通的图片使用，无法展示动画效果
1.3 读取SVG源码
var svgStr = new XMLSerializer().serializeToString(document.getElementById("Svg"));
console.log(svgStr);
5004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
