12-图标的使用
1.svg图标
svg：
矢量图：不会失真
在阿里矢量图库下载：https://www.iconfont.cn/
实例：
<style type="text/css">
svg:hover path:nth-of-type(1) {
fill: gray;
}
svg:hover path:nth-of-type(1)~path {
fill: white;
}
</style>
</head>
<body>
<svg t="1581659683818" class="icon"
viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2899"
width="200" height="200">
<path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z" fill="red" p-id="2900"></path>
<path d="M444.081633 689.632653c-5.22449 0-10.44898-2.089796-14.628572-6.269388-8.359184-8.359184-8.359184-21.420408 0-29.779592l156.734694-156.734693c8.359184-8.359184 21.420408-8.359184 29.779592 0 8.359184 8.359184 8.359184 21.420408 0 29.779591l-156.734694 156.734694c-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" fill="green" p-id="2901"></path>
<path d="M600.816327 532.897959c-5.22449 0-10.44898-2.089796-14.628572-6.269388l-156.734694-156.734693c-8.359184-8.359184-8.359184-21.420408 0-29.779592 8.359184-8.359184 21.420408-8.359184 29.779592 0l156.734694 156.734694c8.359184 8.359184 8.359184 21.420408 0 29.779591-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" fill="blue" p-id="2902"></path>
</svg>
<img src="img/箭头.svg" >
</body>
2.icomoon的使用
官网：https://icomoon.io/
实例：
<head>
<meta charset="utf-8">
<title>icomoon的使用</title>
<link rel="stylesheet" type="text/css" href="css/font-style.css"/>
</head>
<body>
<span class="icon-uniE900">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>
</body>
3.FontAwesome框架
FontAwesome:
优秀的iconfont框架
国内cdn地址
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
实例：
<head>
<meta charset="utf-8">
<title>FontAwesome框架</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<i class="fa fa-car" style="color: red;"></i>
<i class="fa fa-qq"></i>
<i class="fa fa-wechat"></i>
<i class="fa fa-weibo"></i>
<i class="fa fa-"></i>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
