账户中心 退出系统
使用手册 模板中心 账户中心
快速开始
常见问题
更新日志
下载框架
快速部署
组件调用手动调用
自动加载easycom
NVUE 说明
版权要求
设计规范初版
基础布局 ( 6 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
竖向切换动态切换
元素定位
手势识别
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 25 )
宫格布局九宫格
头部导航
底部导航
切换导航单行模式
切换导航多行模式
吸顶容器
动态吸顶
名片卡片
滚动区域
局部选项卡
全屏选项卡模式一原理演示
全屏选项卡模式二原理演示
全屏选项卡实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
弹出菜单
功能菜单
时间轴
侧边抽屉
图标分类
常用列表 ( 9 )
通用列表
滑动列表新版组件模式
新闻列表
评论列表
图文列表
树状列表
拖拽排序竖向
可选列表单选 | 多选
全选列表多选 | 全选
常用组件 ( 25 )
徽章组件
圆角组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
搜索组件
星级评价
通用标题更多、换一批
倒计时
轮播组件新版本 更好用
轮播组件原生模式
区间滑块
进度圆环
城市选择
地区联动新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择
多图上传
头像群组
数值动画
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新原生模式
刷新组件滚动区域模拟模式
上拉加载原生模式
提醒弹框 ( 7 )
遮罩弹出层
顶部消息框
模态对话框
底部对话框
底部消息框
底部操作表
右下消息框
表单相关 ( 12 )
表单元素
表单验证
动态表单
分步提交
数值框
数字键盘
可选标签 单选 多选
可选标签 携带数据
可删标签
点选按钮
下拉选择
滑动解锁
日期时间 ( 6 )
日期及时间带有农历
日期区间日历形式
日期及时间pickr模式
时间段选择pickr模式
日程日历日历+日程
横向日期
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息
地图使用 ( 3 )
位置标注位置转换
周边信息周边搜索
拖拽定位中心坐标
常用界面 ( 21 )
搜索界面
登录注册
个人中心
头像裁剪
购物车
订单中心
条件筛选
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯
图标扩展教程

01 uni-app 普通模式及微信小程序模式

1.1 打开 https://www.iconfont.cn/ 阿里巴巴图标库官网;
1.png
1.2 搜索图标
2.png
1.3 选择并添加好图标后点击购物车按钮,将所选图标添加到一个项目内:
2.png
1.4 点击项目内的生成代码按钮,生成代码及字体路径:
2.png
1.5 在 uni-app 或者小程序内使用字体路径方式导入并使用图标:

@font-face {font-family:"gFont"; src:url('https://at.alicdn.com/t/font_1348787_pdws9521tg.ttf') format('truetype');}
// url 改成对应生成的字体url 地址, 注意以  https冒号 开始
.your-icon{font-family:"gFont" !important; font-size:60rpx; font-style:normal;}
.your-icon-1:before{content:"\e600";}
.your-icon-2:before{content:"\e600";}
//多个图标添加多个 .your-icon-具体名称:before{content:"\对应编码";}即可
// 此处的 e600 来自 项目内有阿里图标库指定, 见下图:

2.png
1.6 在页面中应用图标

<text class="your-icon your-icon-1"></text>
<view class="your-icon your-icon-1"></view>

02 weex 模式下图标扩展

1 - 4 步骤同上;
2.5 注意我们使用阿里图标库默认的字体名称为 iconfont(GraceUI 默认此名称),如果您引入了多个图标库字体名称都为 iconfont 会引起字体冲突,解决方案 : 
未命名-1.png
点击项目右侧的更多操作按钮 > 点击编辑
未命名-1.png
将字体名称改为您自己的字体名称即可;

2.6 在 app.vue 内加载字体、声明字体

<script>
export default {
	onLaunch: function() {
		// #ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary'); //锁定屏幕
		const dom = weex.requireModule('dom');
		dom.addRule('fontFace', {
			'fontFamily': "字体名称 如 myfont",
			'src': "url('https://at.alicdn.com/t/font_823462_m4rz0iqup9.ttf')"
		});
		// #endif
	}
}
</script>
<style>
/* #ifdef APP-PLUS-NVUE */
.myiconfont{font-family:myfont;}
/* #endif */
</style>

2.7 在页面上使用text标签展示字体

<text class="myiconfont">图标的 UniCode</text>

注意 weex 模式下不支持变量形式的  UniCode !