uniapp：iconfont的使用，以及如何手动添加图标到iconfont.css

第一步、下载需要的图标

进入iconfont官网，搜索选择自己想要的图标加入购物车，下载方式选择“下载代码”，下载的是压缩包，解压

解压之后，点击 demo_index.html 浏览器打开，就可以看到刚才下载的那些图标，选择 symbol 可以支持多色图标

第二步、添加到项目

将下图中的几个文件，复制到项目中

打开iconfont.css，如下图所示，图中标出的部分就是刚才下载的那些图标

注：如果想要添加其他图标进来，可以直接在iconfont.css这个文件中按照给出的格式添加
【这个在第四步中会详细说】

引入工作完成，接下来就是使用了

下面是官方的引入和使用提示：（第一步我没有写）

第三步、使用

<template>
	<view class="navBox">
		<view class="navItem">
			<svg class="icon" aria-hidden="true">
			  <use xlink:href="#icon-jihua"></use>
			</svg>
			<view class="navText">重要时刻</view>
		</view>
		<view class="navItem">
			<svg class="icon" aria-hidden="true">
			  <use xlink:href="#icon-jinianri"></use>
			</svg>
			<view class="navText">纪念日</view>
		</view>
		<view class="navItem">
			<svg class="icon" aria-hidden="true">
			  <use xlink:href="#icon-jihua1"></use>
			</svg>
			<view class="navText">目标计划</view>
		</view>
		<view class="navItem">
			<svg class="icon" aria-hidden="true">
			  <use xlink:href="#icon-techreport-1"></use>
			</svg>
			<view class="navText">数据观星</view>
		</view>
	</view>
</template>

<style lang="scss">
	.icon {
	  width: 1em;
	  height: 1em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
	// 自定义样式
	.navBox{
		display: flex;
		margin: 20rpx auto;
		.navItem{
			width: 25%;
			text-align: center;
			svg{
				width: 50rpx;height: 50rpx;border-radius: 50%;
				padding: 20rpx;
				background-color: lightblue;
			}
			.navText{
				font-size: 14px;
				color: lightblue;
			}
		}
	}
</style>

效果图：红色圈出来的部分（这几个图标不是上面第一步的图标，以此图为例）

第四步、添加新图标到iconfont.css并使用

1、再次去iconfont官网下载需要的图标

2、压缩包解压之后找到iconfont.css文件，找到类似下面代码的内容，复制到项目中的iconfont.css文件中

注意：要保证添加的图标名和文件中原有的图标名不相同，否则使用的时候无法确定是哪个图标

.icon-jihua:before {
  content: "\e607";
}

.icon-gongzuojihua:before {
  content: "\e627";
}

.icon-techreport-:before {
  content: "\e62d";
}

3、图标名

iconfont的图标名在引用和使用的时候要保持一致，即iconfont.css文件中和在组件中使用的时候，图标名要保持一致

（1）在下载的html文件中，图标名是这样的

（2）在iconfont.css文件中，图标名是这样的

/* icon-jihua 是图标名 */
.icon-jihua:before {
  content: "\e607";
}

（3）在使用的时候，图标名是这样的

<svg class="icon" aria-hidden="true">
  <!-- icon-jihua 是图标名，并且是iconfont.css文件中定义的图标名 -->
  <use xlink:href="#icon-jihua"></use>
</svg>