IconFont 图标
-
银行卡
-
包
-
地址
-
确认
-
添加
-
条形图
-
相机
-
购物车
-
分类
-
聊天
-
复制
-
编辑
-
删除
-
礼物
-
折线图
-
喜欢
-
更多
-
密码
-
手机
-
图片
-
饼状图
-
赞
-
减少
-
扫一扫
-
筛选
-
分享
-
文本
-
商城
-
时间
-
转发
-
钱包
-
无线网
-
文件夹
-
放大
-
日历
-
标签
-
好友列表
-
禁音
-
播放
-
客服
-
刷新
-
订单
-
红包
-
新闻
-
缩小
-
置顶
-
录像
-
排序
-
暂停
-
语音
-
声音
-
注意
-
活动
-
书籍
-
添加好友
-
下载
-
电
-
表情
-
女
-
直播
-
男
-
列表
-
搜索
-
键盘
-
会员
-
水
-
上传
-
电脑
-
邮件
-
教育
-
奖章
-
大雨
-
晴天
-
暴雨
-
大雪
-
会员卡
-
奖牌
-
中雨
-
铅笔
-
打印机
-
阴天
-
中雪
-
温度
-
小雨
-
雷阵雨
-
工具箱
-
奖杯
-
多云
-
airplane_icon
-
air_condition_icon
-
alarm_clock_icon
-
atm_icon
-
alarm_icon
-
bank_icon
-
balance_scale_icon
-
ban_barrage_icon
-
barrage_icon
-
batch_processing_ico
-
bath_towel_icon
-
beverage_icon
-
bedroom_icon
-
bike_icon
-
battery_charging_ico
-
bathroom_icon
-
capsule_icon
-
boat_icon
-
car_icon
-
category_find_icon
-
circulation_icon
-
cold_icon
-
code_icon
-
concentrate_icon
-
controller_icon
-
cup_icon
-
collect_icon
-
cpu_icon
-
droplight_icon
-
flashlight_icon
-
forbid_icon
-
game_icon
-
fruit_icon
-
fitness_icon
-
fire_hydrant_icon
-
government_icon
-
ice_box_icon
-
hotel_icon
-
integral_icon
-
law_icon
-
link_icon
-
loading_icon
-
menu_icon
-
map_icon
-
money_icon
-
network_icon
-
organization_icon
-
pet_icon
-
ppt_files_icon
-
qr_code_icon
-
plug_icon
-
repeal_icon
-
quit_icon
-
resource_icon
-
restaurant_icon
-
rule_icon
-
router_icon
-
rocket_icon
-
salary_icon
-
server_icon
-
sd_card_icon
-
show_icon
-
shield_icon
-
speed_icon
-
steamer_icon
-
tablet_computer_icon
-
tailor_icon
-
timer_icon
-
toy_icon
-
train_icon
-
transition_icon
-
translate_icon
-
tree_icon
-
tv_icon
-
u_disk_icon
-
umbrella_icon
-
wait_sending_icon
-
warehouse_icon
-
watermelon_icon
-
wireframe_icon
-
word_files_icon
-
workbench_icon
-
编辑
-
安全
-
撤销
-
笔记本
-
茶杯
-
待发货
-
待付款
-
待收货
-
点赞
-
电脑
-
电话
-
定位
-
返回
-
返回2
-
分类
-
分类2
-
返现
-
分享
-
分享2
-
个人
-
工具箱
-
更多2
-
购物
-
购物车
-
更多
-
关闭
-
关闭2
-
关闭3
-
减少
-
减少2
-
客服
-
链接
-
计时
-
礼物
-
列表2
-
排行
-
列表
-
热门
-
删除
-
上传
-
日历
-
上一步
-
收藏2
-
设置
-
收藏
-
视频
-
手机
-
书
-
搜索
-
提示
-
锁
-
天气
-
添加2
-
通知
-
退款
-
文件
-
团队
-
通知2
-
添加
-
文件2
-
文章
-
问题
-
下载
-
问题2
-
相机
-
消息
-
消息2
-
信封
-
信息
-
循环
-
音乐
-
音量
-
账单
-
优惠券2
-
照片
-
正确
-
优惠券
-
正确2
-
主页
-
文件
-
文件夹
-
新文件夹
-
开文件夹
-
列表
-
范例
-
模版
-
业务
-
集合
-
可见
-
关联
-
数据
-
新数据
-
新建文件
-
文件类型
-
云存储
-
日志
-
不可见
-
发布
-
预警
-
预览
-
线上
-
测试
-
暂停
-
停止
-
播放
-
新用户
-
用户
-
用户编辑
-
保存
-
设置
-
编辑
-
删除
-
关闭
-
粘贴
-
复制
-
退出
-
续费
-
另存为
-
添加
-
手机解绑
-
手机绑定
-
备案
-
首页
-
剪切
-
放大镜
-
放大
-
导出
-
导入
-
时间
-
日期
-
时间日期
-
解锁
-
锁定
-
返回
-
刷新
-
移动
-
筛选
-
安装包
-
分享
-
喜欢
-
收藏
-
邮件
-
位置
-
社区
-
反馈
-
管理员
-
表格
-
仪表板
-
数据表
-
数据集
-
演示
-
柱状图
-
折线图
-
散点图
-
大饼图
-
地图
-
关系图
-
图层
-
设计
-
左对齐
-
右对齐
-
上对齐
-
下对齐
-
垂直居中
-
水平居中
-
横向平分
-
纵向平分
-
上移一层
-
下移一层
-
底层
-
顶层
-
英文
-
中文
-
loading
-
对
-
错
-
感叹号
-
问号
-
提示1
-
回滚
-
密钥
-
旗子
-
图钉
-
云上传
-
云下载
-
列表展开
-
返回旧版
-
新手引导
-
耳麦
-
列表收起
-
资讯
-
电源
-
传输
-
开发
-
灯泡
-
配置
-
在线
-
指标
-
虫子
-
API
-
A-B
-
接口
-
总图
-
下钻
-
订阅
-
查询
-
清洗
-
监控
-
视频
-
过滤
-
障碍
-
提示2
-
扫描
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@font-face {
font-family: 'vip-icon';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#vip-icon') format('svg');
}
第二步:定义使用iconfont的样式
.vip-icon{
font-family:"vip-icon" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="vip-icon">3</i>
"vip-icon"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。