1、打开iconfont官网,注册登录。
https://www.iconfont.cn/
2、点击 资源管理>我的项目>新建项目。
右边点击新建项目
3、项目创建完毕,在上方搜索框中,输入要使用的图标名称,找到需要的图标,右键添加至购物车。
4、点击右上角的购物车>添加至项目,选择刚刚创建的项目,点击确定。
5、此时自动跳转到项目内,图标已经被添加,点击下载至本地。
6、下载后的文件,解压后,将整个文件夹放在你的项目目录中,再在你的项目中引入iconfont.css文件。
7、下面要使用字体图标,创建一个i标签,添加两个类名:一个是iconfont,一个是字体图标的名字。见图:
8、此时,浏览器中已展示出字体图标。还可以通过图标名称设置字体的样式,大小颜色等。(注意:用图标名称的类名去设置样式)
9、添加图标到这里就完成了。如果需要重新添加,更新项目中的图标。继续将需要的图标添加至购物车>添加至项目>点击更新代码。
点进更新好的css样式文件:
10、将更新好的代码,ctrl+A全选,ctrl+c复制,替换掉项目目录中的iconfont.css文件。
此时,iconfont.css样式表更新完毕。继续建一个 i 标签,两个类名,设置样式,刷新页面,就看到图标已经显示。
(提示:图标名称可以在iconfont的项目中复制,在css样式表中找起来比较麻烦)
2.保留有色图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
//1、引入css 和js样式
<link rel="stylesheet" href="./iconFont/iconfont.css">
<script src="./iconFont/iconfont.js"></script>
<style>
// 2、设置icon类的样式
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.box {
font-size: 150px;
}
</style>
</head>
<body>
//3. 书写下面内容 主要 use标签中 href 值中 #后面为引入图标的名称
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baoxiang"></use>
</svg>
</body>
</html>