欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

史上最简单粗暴获取阿里巴巴iconfont图标，并引用到vant的方法（没有之一）

发布时间：2023/11/27 53 豆豆
生活随笔 收集整理的这篇文章主要介绍了 史上最简单粗暴获取阿里巴巴iconfont图标，并引用到vant的方法（没有之一） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1、直接去www.iconfont.cn复制自己喜欢的图标svg

 

2、粘贴到html里面

3、设置css中svg path的fill属性颜色色值，就可以改变icon图标的填充色，p话不多说，上代码↓

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>iconfont.cn-svg</title><style>svg, svg * {transition: .382s;-moz-transition: .382s;-webkit-transition: .382s;-o-transition: .382s;-khtml-transition: .382s;cursor: pointer;}svg:hover path {fill: blue;}</style>
</head>
<body>
<svg t="1583591575476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4136" width="128" height="128"><path d="M512 1013.76C234.88512 1013.76 10.24 789.11488 10.24 512S234.88512 10.24 512 10.24s501.76 224.64512 501.76 501.76-224.64512 501.76-501.76 501.76z m278.15936-337.5104l0.4096 0.24576 0.01024-0.50176 0.03072-0.01024-0.03072-0.02048 1.9968-323.328-115.34336-71.3216-163.18464 92.2624 120.95488 70.656 0.18432 137.40032-121.1392 69.76512V839.68l276.11136-163.4304zM392.72448 442.4704L514.048 372.60288V184.32L237.71136 348.91776l14.67392 8.86784-14.86848-8.97024L235.52 672.67584l115.34336 71.3216 163.18464-92.2624-120.95488-70.656-0.18432-138.496-0.18432-0.1024z"p-id="4137"></path>
</svg>
</body>
</html>

不出意外，浏览器呈现的效果如下

总结

以上是生活随笔为你收集整理的史上最简单粗暴获取阿里巴巴iconfont图标，并引用到vant的方法（没有之一）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。