字体图标

uXui 内置图标说明

1. 内置图标字体通过 uni.loadFontFace() 函数加载。

自 uXui 1.1.4 版本起，将字体文件存储于本地 /static/fonts/uxui.ttf，如果您以插件形式部署 uXui 请将 :
/uni_modules/unix-ui/fonts/uxui.ttf 文件
复制到
/static/fonts/uxui.ttf

2. 请访问 https://www.graceui.com/graceUIIcons/ 预览图标并获取 Unicode;

3. 使用变量 + ux-icon 样式来渲染图标：

<text class="demo ux-icon ux-color-blue4">{{"\ue611"}}</text>

##
图标库 unicode 格式为 : & # x e854; 使用时将 & # x 替换为 \u

uni-app x 图标扩展教程

我们推荐您根据自己的项目需求扩展一套符合自己当前项目的图标，因为内置图标并不能满足您的具体项目，教程如下 ：

步骤 一 : 选取图标并生成字体

1.1 选择图标并添加到项目

以阿里图标库 ( www.iconfont.cn ) 为例 :

通过搜索找到图标 > 加入到购物车 > 添加到具体的项目，如 : test。

1.2 配置项目

点击 项目配置 按钮打开配置界面 :

去除 FontClass 前缀，修改 Font Family 为自己的字体名称，如 test。

1.3 生成字体

点击 暂无代码，点此生成 按钮，生成图标字体。生成后点击 Unicode 标签即可获取在线字体地址，如 :

at.alicdn.com/t/c/font_4310759_5k5sgveehpr.ttf
为了兼容 H5 端，请下载字体文件，并部署到项目 : /static/fonts/xxx.ttf

2 : 加载字体

在 app.vue 中使用 uni.loadFontFace() 函数加载字体：

// 加载字体
uni.loadFontFace(
{
	global: true,
	family:"test",
	source:"url('/static/fonts/***.ttf')",
	success() {
		console.log('loadFontFace success')
	},
	fail:function(e){
		console.log(e)
	}
});
// 加载字体

步骤3 : 声明图标样式

在 uni.scss 中声明一个图标样式，如 : my-icon

.my-icon{font-family:test;}

在页面或组件中使用图标

通过图标库查看图标对应的 Unicode，使用变量 + ux-icon 样式来渲染图标 :

<text class="demo my-icon ux-color-blue4">{{"\ue6e2"}}</text>

更新图标

在图标库官网更新图标（ 添加、修改、删除 ），更新后点击生成按钮会产生一个新的图标字体，将新的地址替换到 uni.loadFontFace() 函数，即可完成图标的更新工作。