废话不多说这接上教程，不过我只推荐简单的那一套，太麻烦了我也不想用。
1、去找你心仪的图标http://www.iconfont.cn/ 找到需要的icon
2、点击你要用的图标
3、点击下载
复制SVG
4、这段代码是在html中执行的。如下：
<svg t="1573287009445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="932" width="200" height="200"><path d="M491.698087 0c271.538087 0 491.653565 220.115478 491.653565 491.698087v7.034435c0 81.563826-19.856696 158.497391-55.028869 226.214956l50.265043 46.525218a142.024348 142.024348 0 0 1 0.133565 208.317217 165.264696 165.264696 0 0 1-224.701217 0.133565l-43.853913-40.603826a489.650087 489.650087 0 0 1-218.468174 51.110957C220.115478 990.430609 0 770.226087 0 498.732522v-7.034435C0 220.115478 220.115478 0 491.698087 0z m28.894609 282.35687a40.247652 40.247652 0 0 0-57.789218 0l-182.450087 183.696695a40.96 40.96 0 0 0 0 58.189913l182.450087 183.741218c15.226435 16.428522 41.583304 16.428522 57.789218 0l182.450087-183.741218a40.96 40.96 0 0 0 0-58.189913z m-28.939131 278.349913c3.606261 0 6.277565 1.068522 8.904348 2.003478 2.671304 1.068522 5.342609 3.072 7.212522 5.164522 1.78087 2.003478 3.561739 4.140522 4.496695 7.168 0.934957 3.072 1.78087 6.144 1.78087 9.171478 0 3.116522-0.934957 6.144-1.78087 9.171478a18.031304 18.031304 0 0 1-4.452173 7.212522 22.706087 22.706087 0 0 1-16.11687 7.168c-3.606261 0-6.233043-1.068522-8.904348-2.003478-2.671304-1.068522-4.541217-3.072-7.212522-5.164522-1.78087-2.003478-3.561739-4.140522-4.496695-7.212522-0.845913-2.938435-1.78087-5.030957-1.78087-9.171478 0-3.027478 0.934957-6.099478 1.78087-9.171478a18.031304 18.031304 0 0 1 4.496695-7.123479 22.706087 22.706087 0 0 1 16.11687-7.168z m-0.979478-178.086957a47.682783 47.682783 0 0 1 45.412174 62.19687l-24.486957 77.06713-1.558261 3.739826a21.949217 21.949217 0 0 1-40.247652-3.739826L445.217391 444.772174l-1.29113-5.030957a47.638261 47.638261 0 0 1 46.747826-57.076869z" fill="#F5906C" p-id="933"></path></svg>
5、需要改图标的宽度、高度、颜色以及位置的话看如下截图
6、如果你需要在css样式文件里面调整位置干啥的，这是又有两个icon类选择器，你可以改两个不同名字。
7、完成截图示例
8、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/inco.css">
</head>
<body>
<svg t="1573288844498" class="icon-house" viewBox="0 0 1210 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1168" width="20" height="200"><path d="M1023.906909 993.745455v-248.925091h-143.546182v-93.323637H1070.545455c-25.786182-15.778909-38.306909-42.077091-42.775273-71.447272a9967.709091 9967.709091 0 0 1-13.358546-68.00291h-134.004363V418.862545h118.132363L993.559273 372.363636h87.133091c11.170909 103.703273 22.155636 170.216727 32.907636 199.540364 16.104727 43.938909 49.850182 79.592727 96.581818 79.592727v93.323637h-106.402909v248.878545h-79.872zM228.770909 0L223.883636 26.949818h603.229091L822.178909 0h92.253091l32.907636 153.041455c7.307636 48.128 48.221091 83.688727 96.628364 79.592727v93.323636h-112.965818v604.765091H1210.181818V1024H53.201455v-93.277091h40.02909V325.957818H0V232.634182c48.081455 4.096 88.948364-31.464727 96.302545-79.592727L129.210182 0h99.607273z m411.322182 372.363636c-28.811636 0-55.063273 11.822545-74.007273 30.580364a104.680727 104.680727 0 0 0-30.580363 74.286545c-0.139636 1.629091 0 3.816727 0.139636 6.05091l-32.628364 32.395636-45.474909-45.428364-11.915636-40.354909a17.594182 17.594182 0 0 0-10.146909-11.450182L343.505455 379.205818a17.687273 17.687273 0 0 0-19.549091 3.816727l-16.011637 16.011637-16.244363 16.104727a17.826909 17.826909 0 0 0-3.165091 20.805818l38.725818 90.763637a17.687273 17.687273 0 0 0 11.403636 10.053818l40.401455 12.101818 45.428363 45.428364-124.183272 124.136727c-23.319273 23.365818-25.367273 51.572364-15.453091 74.519273 3.677091 8.797091 9.122909 16.663273 15.732363 23.365818 6.702545 6.609455 14.708364 12.194909 23.598546 15.872 22.993455 9.914182 51.060364 7.912727 74.286545-15.36l111.336728-111.569455 109.195636 109.056a72.610909 72.610909 0 0 0 52.037818 21.550546c18.804364 0 37.329455-7.074909 51.805091-21.317818 14.708364-14.615273 21.829818-33.512727 21.829818-52.317091 0-19.083636-7.447273-37.422545-20.712727-51.153455l-0.884364-1.024-108.916363-108.916364 19.781818-19.54909c2.048 0 4.096 0.139636 6.097454 0.139636a104.261818 104.261818 0 0 0 73.914182-30.626909 105.006545 105.006545 0 0 0 28.672-94.673455h-0.093091a88.948364 88.948364 0 0 0-5.492363-18.292363 18.292364 18.292364 0 0 0-4.282182-7.633455 18.013091 18.013091 0 0 0-25.413818 0c-13.591273 13.730909-27.182545 27.042909-40.634182 40.634182l-8.098909-2.141091-8.378182-2.327273-2.048-8.238545-2.327273-8.098909 40.680728-40.634182a17.92 17.92 0 0 0-5.585455-29.090909 93.277091 93.277091 0 0 0-20.200727-6.050909A88.343273 88.343273 0 0 0 640.093091 372.363636z m-51.525818 304.686546a11.031273 11.031273 0 0 1 15.220363 0l65.396364 65.768727 1.722182 2.280727a10.752 10.752 0 0 1-1.861818 12.939637 10.705455 10.705455 0 0 1-14.987637-0.232728l-65.722182-65.62909-1.722181-2.327273a10.705455 10.705455 0 0 1 1.954909-12.8z" fill="#A98CFF" p-id="1169"></path></svg>
<svg t="1573288660371" class="icon-bottom" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2200" width="20" height="200"><path d="M959.391517 255.877715 511.696078 703.573153 64.00064 255.877715Z" p-id="2201"></path></svg>
</body>
</html>
注：本人也是在偶然间在csdn看到了，然后看到公司代码中也用到了就了解了一下，如有不足欢迎补充！谢谢！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
