字体图标的使用

1.下载字体图标

https://www.iconfont.cn/

2.在代码中引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face {
    		font-family: 'test';
    		src: url('./font/iconfont.eot'); /* IE9*/
    		src: url('./font/iconfont.eot') format('embedded-opentype'), /* 		IE6-IE8 */
    		url('./font/iconfont.woff') format('woff'), /* chrome、firefox */
    		url('./font/iconfont.ttf') format('truetype'), /* 		chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    		url('./font/iconfont.svg') format('svg'); /* iOS 4.1- */
		}
                   // 上面这段不用关注，基本不会改，注意font包的路径就可以了
		.iconfont {
			font-family: 'test';
			font-size: 16px;
		}
			
		.iconfont::before {
			content: '\e683'; // 下载的字体图标包中有每个图标的对应值，直接拷贝，前面加反斜杠就可以了
		}
	</style>
</head>
<body>
	<div class='iconfont'></div>
</body>
</html>
posted @ 2020-04-11 15:46  zero博士  阅读(165)  评论(0)    收藏  举报