HTML使用字体图标( tff / woff )

本文章采用element-ui字体文件

场景：制作一个不大的网站（vue），不需要安装element-ui。
|
为了使用它的图标文件，为了减小文件的大小，加快网页加载速度

---

1. 下载element-ui的字体文件

   element 图标文件下载

2. 引入.woff文件，编写css文件

   不想写css文件的,直接看文章末尾

   使用vue-cli的小伙伴，如果和我一样不会loader配置的话，直接在主文件（index.html）中插入style标签

   css文件/syle标签中

   @charset "UTF-8";
   
   @font-face {
   	font-family: element-icons;
   	src: url(/css/element-icons.woff) format("woff");
   	font-weight: 400;
   	font-display: "auto";
   	font-style: normal
   }
   
   [class*=" el-icon-"],
   [class^=el-icon-] {
   	font-family: element-icons !important;
   	speak: none;
   	font-style: normal;
   	font-weight: 400;
   	font-variant: normal;
   	text-transform: none;
   	line-height: 1;
   	vertical-align: baseline;
   	display: inline-block;
   	-webkit-font-smoothing: antialiased;
   	-moz-osx-font-smoothing: grayscale
   }
   

3. 使用图标

   下载element的index.css文件(不用存放到项目中)

   • 使用开发工具打开该css文件（XHbuilder / vscode）
   • 使用开发工具自带的 重排代码格式/格式化文档重新编排文件
   • 在官网找到你要使用的图标
     例：使用 el-icon-info 图标，在index.css文件中搜索（Ctrl + F）该图标名找到类似于

     .el-icon-info:before {
     	content: ""
     }
     

     复制下来，追加到第2步中的css中

4. 在 Html/Template 中使用

   <i class="el-icon-delete"></i>
   <div class="el-icon-info"></div>
   ... ...
   

---

注意事项：在使用el-icon-loading图标时，单复制el-icon-loading:before是不够的，还要复制动画

.el-icon-loading:before {
	content: ""
}
.el-icon-loading {
	-webkit-animation: rotating 2s linear infinite;
	animation: rotating 2s linear infinite
}
@-webkit-keyframes rotating {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}
	100% {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg)
	}
}
@keyframes rotating {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}
	100% {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg)
	}
}

---

不想写css的小伙伴看这里

下载element的index.css文件(不用存放到项目中)
rotating（动画名）之后所有的都删掉，大概只会有1000多行了，这样就不用每次都查找复制