第一步,拥有svg格式的图片
途径一:ui给你
途径二:自己去阿里巴巴下载
网址:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
选好加入库
加入库之后:
下载下来的文件有:
新建一个文件夹,里面放这些文件:
第二步,字体图标的使用
①demo的html页面
<!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>字体图标的引入和使用-svg是个好东西</title>
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" href="css/icon.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="content">
<button type="button" style="width:80px; color:#fff;">按钮展示:</button>
<button type="button" class="">
<i class="iconfont icon-shanchu"></i>
</button>
<button type="button" class="">
<i class="iconfont icon-fenqitianjia"></i>
</button>
<button type="button" class="">
<i class="iconfont icon-chehui"></i>
</button>
</div>
</div>
<p style="width:500px; margin:0 auto; margin-bottom:10px;">表格展示:</p>
<table>
<tbody>
<tr>
<th>删除</th>
<th>新增</th>
<th>还原</th>
</tr>
<tr>
<td><i class="iconfont icon-shanchu"></i></td>
<td><i class="iconfont icon-fenqitianjia"></i></td>
<td><i class="iconfont icon-huanyuan"></i></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
注意点:head里引入tset的css样式和icon的css样式
② icon的css表
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1565918389247'); /* IE9 */
src: url('iconfont.eot?t=1565918389247#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU0AAsAAAAACrQAAAToAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqIRIZ5ATYCJAMYCw4ABCAFhG0HXBsTCSMRdntQYpP91QFviDf1d5jqNp54QGcV2oYCXtR41Rm1Det/5IiI9EWC+Rw8z+f9+2sfvTQpAOYWQAp5BmEGeCR+IcfW5OK7pP/NWxXxkBQq5HkVC3Wl7m1rHLExZ26vqRA/tXGiAgB0cBJeHP8FUrU454mMiFAjeYseSPZ9smbjLD39//eqZtq24LzZFqCnlrkWfUssGprHewo0xsZ/StaKY1WGk3CzMnPm+rchgE9OiiP1GzZvj4eBLhJAhg5K9MHzeTEJbMFzOMmdBlmBxVML1Q1gufn38omy4oHCauhdrcMG/an9Vr11Oopxdx0RVRcGrveBBooDBqS7NNoRbVeLo/HfUUPR5JMNAm9dHMNbpWs7+y8PBIXGYEEcZE0OavOahbdKVUDgrbYQthlYgM3CAmwOZlAEXIVnZIac0hfJ2Ua09NEkhGUIQXIJI45vZMOlEEULJ4SucHI8RYqmdFrkK6RZnPg1WVSgPRz2RgoREBG/bsrH81u2HJZWE9tk389mw28rZfn6hRQsvQ6UxJVII6U5A9MHdAWHKa4rPu5I4N1JQdXeN0mx4FPZ7y1hvcE6vR6M90LAjJzXnKP2ZB6+49UMCV6Iipid+0w/QIKUxFtjmpO2HpIQhg78+VsTxPKRPtQsiKMoQ3Hyl9gl+Odin4uoO/Mc6XHfwHDX/lv24vnL1YlamfehMSKlQArZZUpQ+FuuKr7Hj+ZKRfnyYXvPR4XbVz1dU0WXUpGTVHr8a69UtgZzK39IqyuObm8Y1Spc8XXwyxFMnc3Es16VF6lq3fslZ5XnXqmU/3dteG9AxnTtM/w+4NSqHYVntKf0vdq50y/K/Cb9gvQhO251lsWp3Jvmb1yqGwxfGqVfmrvRpCqL72RMVaVLr7YN/raZkoW1f60d2vKV9NC/7QR/vP3FjvczLRo65nzNBDvMJkzldocv2NBPcE2Sa2IvHGEvZblkEwNtWPt08/D6N20iKN8od7oqQycVLL00fbPlv7J+TuXarlLHaJh+6cQuvarW9wQGTD46efK3Qt8Kx5AY7WX8YrjjjP+o1WtuzFVHV+therh+9VwZUn5ToY2lh+zX7y7rtXoNGyWe8cTmzm2fCBXUmtEdSbH6zEXz998GposnNYynpVzPxhl5/VVOVMy/Kn8LCRPSXFqEYQs50bFTxxo3aw549LhTjU78igE1b9bo2KXr6cXq9Gm9WFxz+hT5AYhjjbXeF18t0VX+xh9jzhW9pFeq6r95gQHg6dQCx011NmI0GwEeCjLr/rQWUwkhNn4M5HPmhaXeEccI4FhOAP8GN74oQAwl0/KqKluGhrR63CODC4okcoDGIz/RUIuDJaA8ODxqgU8xGt0fkI7RaMQkA4oyl4GQmoOgSMlF0KTmJtFQX4IlI1/AkVo0+HSUdE8MKCi38GIjaBRf8PwB27oiJaALa/CIqS+MeA0m94rScQHiIAo2DlihVHFN904TVQKSuoQ9ex8WRQ2N1BlaDZxqsw5Dkv1QYOuyt2AjaBRf8PwB27oifbUuQr9/xNQXRhIw38pXlI4PD3EQZSAerFUmzK6Md+80UV4moGt/XcKeh7EQ1Roa+WkZWg1cgXKzDvkiymoNmreXa3kP8KEvO1GixYgVJ0lMxzhTWefH5P+OJ9aheySvCKuWlU2VqVIz50318/R6') format('woff2'),
url('iconfont.woff?t=1565918389247') format('woff'),
url('iconfont.ttf?t=1565918389247') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1565918389247#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
color:#fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shanchu:before {
content: "\e602";
}
.icon-fuzhi:before {
content: "\e603";
}
.icon-chehui:before {
content: "\e604";
}
.icon-fenqitianjia:before {
content: "\e605";
}
.icon-huanyuan:before {
content: "\e606";
}
注意点:
- font-family里面的src要写正确,根据自己这个字体文件放的位置来确定来源地址,写错就找不到图标了。
- iconfont的类名,因为我需要白色边框的图标,所以我自己加了颜色。
- icon-shanchu等等这一类的类名,直接引用就可以看到图标,但是要记住如果想要图标显示,需要同时引入 .iconfont类名和你需要的删除或者复制或者其他的类名
③ demo的css样式表
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.icon {
display: block;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
}
/* 按钮部分 */
.wrapper {
height: 50px;
}
.content {
float: right;
}
button {
width: 30px;
height: 30px;
border:none;
border-radius: 4px;
background-color: #335e9a;
}
button:last-child {
margin-right: 30px;
}
button:hover {
background-color: #3990c9;
}
/* 表格部分 */
table {
width: 500px;
height: 100px;
text-align: center;
margin: 0 auto;
color: #fff;
border:1px solid #d4d4d4;
background-color: #3990c9;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #d4d4d4;
}