史上最简单粗暴获取阿里巴巴iconfont图标,并引用到vant的方法(没有之一)
生活随笔
收集整理的這篇文章主要介紹了
史上最简单粗暴获取阿里巴巴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的方法(没有之一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: VSCode设置类似Webstorm那样
- 下一篇: 鲜为人知的object-fit属性,让您