步骤:
- 进入iconfont-阿里巴巴矢量图标库
- 将图标添加至购物车
- 点击购物车,添加至项目
- 下载到本地
- 引用iconfont.css
- 打开demo_index.html文件查看引入图标的类名
- 复制类名
使用无色的字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
<title>Document</title>
</head>
<body>
<!-- <span class="iconfont 图标的类名"></span> -->
<span class="iconfont icon-jingyingjihua"></span>
</body>
</html>
图标太小,可以自定义其他类名修改样式
使用有色的字体图标
在无色图标基础上,引入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
<script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- <span class="iconfont 图标的类名"></span> -->
<span class="iconfont icon-jingyingjihua"></span>
</body>
</html>
设置固定样式(必写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
<script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
<title>Document</title>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- <span class="iconfont 图标的类名"></span> -->
<span class="iconfont icon-jingyingjihua"></span>
</body>
</html>
使用svg标签,在href=“# 字体图标的类名”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
<script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
<title>Document</title>
<style>
.small {
font-size: 12px;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- <span class="iconfont 图标的类名"></span> -->
<!-- <span class="iconfont icon-jingyingjihua"></span> -->
<svg class="icon small" aria-hidden="true">
<use xlink:href="#icon-jingyingjihua"></use>
</svg>
</body>
</html>