【CSS】12-图标的使用

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>