uniapp项目的字体图标引入

  1. 先去 https://www.iconfont.cn/ 下载图标到本地并解压
  2. 选择解压文件夹中的 iconfont.css, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff, iconfont.woff2 六个文件抽出来组成一个新的文件夹 fonts
  3. 把 fonts 文件夹放在 项目根目录下的 static 文件夹下即可
  4. 把 iconfont.css 文件引入 根组件 App.vue 的 style标签下的第一行
<style>
	/*每个页面公共css */
	@import url("./static/fonts/iconfont.css");
</style>
  1. 进入 iconfont.css 文件,添加一下 ~@/static/fonts/ (不是只加一个)
@font-face {font-family: "iconfont";
	/* 原来的引入路径 */
  src: url('iconfont.eot?t=1590290558954');
@font-face {font-family: "iconfont";
	/* 修改的引入路径 */
  src: url('~@/static/fonts/iconfont.eot?t=1590290558954');
  1. 最后, 在pages文件夹下的 任何一个页面(.vue文件)引入即可
<template>
	<view>
		<view class="iconfont icon-wifi"></view>
	</view>
</template>

你可能感兴趣的:(vue,uni-app)