• 编译
    
  • 下一页
    
  • 左上
    
  • favorite
    
  • left
    
  • 用户
    
  • 邮箱
    
  • 上一页
    
  • 下拉
    
  • 添加
    
  • list
    
  • delete
    
  • 退出
    
  • 文件上传
    
  • 注销
    
  • 邮箱
    
  • 单位
    
  • 刷新
    
  • 更多
    
  • down
    
  • chart pie
    
  • user
    
  • picture
    
  • 视频
    
  • folder
    
  • selected
    
  • ViewGallery
    
  • Select all
    
  • list
    
  • eye
    
  • right
    
  • up
    
  • 视频播放
    
  • 消息
    
  • 选中
    
  • 消息
    
  • area-chart
    
  • 添加
    
  • 视频
    
  • python
    
  • 声音
    
  • 消息
    
  • question
    
  • auto
    
  • task
    
  • atm-away
    
  • cross
    
  • fire
    
  • 工具
    
  • 空气_阴天
    
  • 消息
    
  • pin
    
  • 文件夹
    
  • full-screen
    
  • 消息
    
  • 上传视频
    
  • warning
    
  • 上传文件
    
  • cross
    
  • cross-circle
    
  • application
    
  • link
    
  • menu-unfold
    
  • menu-fold
    
  • 选中
    
  • 规范
    
  • bars
    
  • bms_脚手架_库存
    
  • minus
    
  • 更多
    
  • 脚手架管理
    
  • notification
    
  • picture
    
  • save
    
  • file
    
  • 放大
    
  • ALIGN RIGHT
    
  • success
    
  • new-window
    
  • 移除
    
  • 选中
    
  • 注销
    
  • arrow-down-right
    
  • folder-open
    
  • tree
    
  • warning
    
  • phone
    
  • 帮助
    
  • 回到顶部
    
  • subdirectory_arrow_right
    
  • 添加
    
  • rightBottom_02
    
  • 视频播放
    
  • number
    
  • 选中
    
  • 退出
    
  • 指南
    
  • 警告
    
  • list
    
  • 选中
    
  • WorkflowDesign
    
  • WorkflowMonitoring
    
  • task
    
  • wxb报表
    
  • wxb工具
    
  • wxb搜索推广
    
  • wxb定位
    
  • setting
    
  • PLUS
    
  • favorite
    
  • icon-toTop
    
  • copy
    
  • 更多
    
  • 操作指南
    
  • test
    
  • 标签1
    
  • shouji
    
  • 移除
    
  • 工具
    
  • 首页-首页
    
  • 注销
    
  • 回到顶部
    
  • home
    
  • close
    
  • 是的_right149
    
  • ok
    
  • 首页
    
  • 上传文件
    
  • 退出
    
  • tree
    
  • setting
    
  • 回到顶部
    
  • 视频
    
  • info
    
  • toTop
    
  • paper-clip
    
  • play-video-button
    
  • file
    
  • 字符
    
  • 选中
    
  • task
    
  • 上传文件
    
  • 订单关闭
    
  • 加粗
    
  • clock
    
  • 上传视频
    
  • 声音
    
  • 指引
    
  • icon_menu_fold_30x30
    
  • 天气_暴雪
    
  • 天气_冰雹
    
  • 天气_风暴
    
  • 天气_雷阵雨
    
  • 天气_小雪
    
  • 天气_小雨
    
  • 天气_阵雪
    
  • 天气_阵雨
    
  • 天气_中雪
    
  • 天气_中雨
    
  • 选中
    
  • 说明
    
  • 视频全屏
    
  • 退出全屏
    
  • sql
    
  • hot
    
  • 打包
    
  • history
    
  • html
    
  • icon_menu_unfold_30x30
    
  • 入门篇
    
  • 环境
    
  • data
    
  • 通用类_添加视图
    
  • 定制
    
  • error
    
  • check
    
  • 选中
    
  • 移除
    
  • 更多
    
  • edit
    
  • folder-close
    
  • check-circle
    
  • 皮肤
    
  • workflow
    
  • 成功
    
  • tree
    
  • good
    
  • template
    
  • 减号
    
  • themeisle
    
  • 资源借用
    
  • npm
    
  • 左箭头
    
  • 返回
    
  • 列-表
    
  • 向下 Down 1000
    
  • video
    
  • 724编辑器_行间距
    
  • 更多
    
  • 业务
    
  • 工程管理
    
  • ray
    
  • 三道杠无填充
    
  • 上传视频
    
  • desktop on-line statistics
    
  • 标识类_添加文件夹
    
  • 返回
    
  • file-tree
    
  • 穿梭框
    
  • eye-o
    
  • sass
    
  • number0
    
  • number6
    
  • number2
    
  • number4
    
  • number3
    
  • number7
    
  • number8
    
  • number5
    
  • number9
    
  • number10
    
  • qr-code
    
  • 关闭-半角
    
  • 移除
    
  • ruby
    
  • 退出
    
  • 报警
    
  • number
    
  • chart-bar
    
  • 工具
    
  • 移除
    
  • 定制
    
  • 详情consult
    
  • menu-unfold
    
  • 规范
    
  • success
    
  • 环境
    
  • 符号-文档
    
  • history
    
  • 基 础管理
    
  • 添加数据源
    
  • 隐藏列
    
  • edit
    
  • input
    
  • enty-out-storage
    
  • setting
    
  • 下划线
    
  • 注销
    
  • 定制
    
  • vue
    
  • 表格
    
  • cancel
    
  • java
    
  • 更新日志
    
  • 报警
    
  • 基础
    
  • 注销
    
  • template
    
  • appStore
    
  • video
    
  • 入库
    
  • 出库
    
  • html
    
  • 选中
    
  • 添加文件
    
  • Application
    
  • 收 藏
    
  • 指引
    
  • 信封
    
  • 图表
    
  • 单位
    
  • 卡片
    
  • Webpack
    
  • code
    
  • password
    
  • 条纹码 条形码 条码
    
  • close
    
  • fire
    
  • ALIGN LEFT
    
  • ALIGN MIDDLE
    
  • 数据表格2
    
  • code
    
  • 晴-天气
    
  • 天气_大风
    
  • 天气_大雪
    
  • 天气_雷
    
  • 天气_雨夹雪
    
  • 天气_大雨
    
  • enzyme
    
  • 回到顶部
    
  • 视频上传
    
  • js
    
  • 
  • 右箭头
    
  • 检查
    
  • 右下箭头
    
  • table
    
  • gulp
    
  • react
    
  • sass
    
  • 左上箭头
    
  • tags
    
  • 组件库
    
  • 天气
    
  • add
    
  • 顶层
    
  • 底层
    
  • initiate-assistance
    
  • 维修记录
    
  • 
  • 交互
    
  • 交互随即查询
    
  • 公文范例库
    
  • postcss
    
  • webpack
    
  • 新增知识库
    
  • 重命名
    
  • 操作指南
    
  • 组织机构
    
  • 交互图标
    
  • 右上
    
  • 楼层设置
    
  • caret-right
    
  • 首页
    
  • menu fold
    
  • 业务
    
  • list
    
  • table
    
  • react
    
  • 右斜上箭头
    
  • more
    
  • 文档
    
  • 开发环境
    
  • 日期
    
  • 开发环境
    
  • search
    
  • 缩小
    
  • 上移
    
  • 下移
    
  • 收缩
    
  • 展开
    
  • 
  • qr-code
    
  • open-in-new
    
  • 角色管理
    
  • 字体
    
  • 斜体
    
  • 方向-右
    
  • 表视图
    
  • 设置
    
  • 巡检路线
    
  • 巡检记录
    
  • 巡检计划
    
  • 巡检点
    
  • 消息
    
  • 任务安排
    
  • 检查项目
    
  • 分类目录
    
  • 查询统计
    
  • 可口可乐
    
  • 检查项
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'amosicon';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#amosicon') format('svg');
}

第二步:定义使用 iconfont 的样式

.amosicon {
  font-family: "amosicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="amosicon">&#x33;</span>

"amosicon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 编译
    .amosicon-compile
  • 下一页
    .amosicon-next-page
  • 左上
    .amosicon-arrow-left-top-thin
  • favorite
    .amosicon-favorite1
  • left
    .amosicon-left
  • 用户
    .amosicon-user1
  • 邮箱
    .amosicon-youxiang
  • 上一页
    .amosicon-pre-page
  • 下拉
    .amosicon-xiala
  • 添加
    .amosicon-add2
  • list
    .amosicon-list-dot
  • delete
    .amosicon-delete
  • 退出
    .amosicon-tuichu
  • 文件上传
    .amosicon-file-upload-2
  • 注销
    .amosicon-zhuxiao4
  • 邮箱
    .amosicon-youxiang1
  • 单位
    .amosicon-danwei
  • 刷新
    .amosicon-refresh
  • 更多
    .amosicon-gengduo
  • down
    .amosicon-down
  • chart pie
    .amosicon-pie-chart
  • user
    .amosicon-user
  • picture
    .amosicon-picture
  • 视频
    .amosicon-video1
  • folder
    .amosicon-folder
  • selected
    .amosicon-selected
  • ViewGallery
    .amosicon-viewgallery
  • Select all
    .amosicon-selectall
  • list
    .amosicon-list1
  • eye
    .amosicon-eye
  • right
    .amosicon-right
  • up
    .amosicon-up
  • 视频播放
    .amosicon-shipinbofang
  • 消息
    .amosicon-xiaoxi
  • 选中
    .amosicon-xuanzhong
  • 消息
    .amosicon-message
  • area-chart
    .amosicon-area-chart
  • 添加
    .amosicon-tianjia2
  • 视频
    .amosicon-shipin
  • python
    .amosicon-python
  • 声音
    .amosicon-shengyin
  • 消息
    .amosicon-xiaoxi2
  • question
    .amosicon-question
  • auto
    .amosicon-auto
  • task
    .amosicon-task
  • atm-away
    .amosicon-atmaway
  • cross
    .amosicon-cross1
  • fire
    .amosicon-fire-fat
  • 工具
    .amosicon-tools-2
  • 空气_阴天
    .amosicon-tianqi-yintian
  • 消息
    .amosicon-message-1
  • pin
    .amosicon-pin
  • 文件夹
    .amosicon-wenjianjia
  • full-screen
    .amosicon-full-screen
  • 消息
    .amosicon-tubiao15
  • 上传视频
    .amosicon-shangchuanshipin
  • warning
    .amosicon-warning
  • 上传文件
    .amosicon-file-upload-3
  • cross
    .amosicon-cross
  • cross-circle
    .amosicon-cross-circle
  • application
    .amosicon-application-1
  • link
    .amosicon-link
  • menu-unfold
    .amosicon-fat-menu-unfold
  • menu-fold
    .amosicon-fat-menu-fold
  • 选中
    .amosicon-xuanzhong1
  • 规范
    .amosicon-guifan
  • bars
    .amosicon-bars
  • bms_脚手架_库存
    .amosicon-scaffold-store
  • minus
    .amosicon-minus
  • 更多
    .amosicon-angle-more
  • 脚手架管理
    .amosicon-scaffold
  • notification
    .amosicon-notification
  • picture
    .amosicon-picture1
  • save
    .amosicon-save
  • file
    .amosicon-file
  • 放大
    .amosicon-zoom-in
  • ALIGN RIGHT
    .amosicon-align-right
  • success
    .amosicon-success
  • new-window
    .amosicon-window
  • 移除
    .amosicon-remove
  • 选中
    .amosicon-xuanzhong2
  • 注销
    .amosicon-zhuxiao
  • arrow-down-right
    .amosicon-down-right-arrow
  • folder-open
    .amosicon-folder-open
  • tree
    .amosicon-tree
  • warning
    .amosicon-danger
  • phone
    .amosicon-phone
  • 帮助
    .amosicon-help
  • 回到顶部
    .amosicon-huidaodingbu
  • subdirectory_arrow_right
    .amosicon-entry-sub-graph
  • 添加
    .amosicon-tianjia1
  • rightBottom_02
    .amosicon-right-bottom
  • 视频播放
    .amosicon-shipinbofang1
  • number
    .amosicon-number-1
  • 选中
    .amosicon-check1
  • 退出
    .amosicon-exit-3d
  • 指南
    .amosicon-zhinan
  • 警告
    .amosicon-jinggao
  • list
    .amosicon-list11
  • 选中
    .amosicon-xuanzhong3
  • WorkflowDesign
    .amosicon-workflow-design
  • WorkflowMonitoring
    .amosicon-workflow-monitor
  • task
    .amosicon-task-2
  • wxb报表
    .amosicon-wxbbaobiao
  • wxb工具
    .amosicon-wxbgongju
  • wxb搜索推广
    .amosicon-wxbsousuotuiguang
  • wxb定位
    .amosicon-wxbdingwei
  • setting
    .amosicon-setting
  • PLUS
    .amosicon-plus
  • favorite
    .amosicon-favorite
  • icon-toTop
    .amosicon-icontotop
  • copy
    .amosicon-copy
  • 更多
    .amosicon-gengduo-copy
  • 操作指南
    .amosicon-caozuo
  • test
    .amosicon-test
  • 标签1
    .amosicon-label
  • shouji
    .amosicon-shouji
  • 移除
    .amosicon-yichu
  • 工具
    .amosicon-tools
  • 首页-首页
    .amosicon-shouye1
  • 注销
    .amosicon-zhuxiao1
  • 回到顶部
    .amosicon-huidaodingbu1
  • home
    .amosicon-home
  • close
    .amosicon-close
  • 是的_right149
    .amosicon-down-right
  • ok
    .amosicon-ok
  • 首页
    .amosicon-shouye
  • 上传文件
    .amosicon-file-upload
  • 退出
    .amosicon-exit-fat
  • tree
    .amosicon-tree1
  • setting
    .amosicon-setting1
  • 回到顶部
    .amosicon-huidaodingbu2
  • 视频
    .amosicon-shipin1
  • info
    .amosicon-info
  • toTop
    .amosicon-totop
  • paper-clip
    .amosicon-paper-clip
  • play-video-button
    .amosicon-playvideobutton
  • file
    .amosicon-file-lef
  • 字符
    .amosicon-char
  • 选中
    .amosicon-xuanzhong4
  • task
    .amosicon-task-1
  • 上传文件
    .amosicon-shangchuanwenjian
  • 订单关闭
    .amosicon-dingdanguanbi
  • 加粗
    .amosicon-bold
  • clock
    .amosicon-clock
  • 上传视频
    .amosicon-video-upload
  • 声音
    .amosicon-voice
  • 指引
    .amosicon-zhiyin
  • icon_menu_fold_30x30
    .amosicon-sim-menu-fold
  • 天气_暴雪
    .amosicon-tianqi-baoxue
  • 天气_冰雹
    .amosicon-tianqi-bingbao
  • 天气_风暴
    .amosicon-tianqi-fengbao
  • 天气_雷阵雨
    .amosicon-tianqi-leizhenyu
  • 天气_小雪
    .amosicon-tianqi-xiaoxue
  • 天气_小雨
    .amosicon-tianqi-xiaoyu
  • 天气_阵雪
    .amosicon-tianqi-zhenxue
  • 天气_阵雨
    .amosicon-tianqi-zhenyu
  • 天气_中雪
    .amosicon-tianqi-zhongxue
  • 天气_中雨
    .amosicon-tianqi-zhongyu
  • 选中
    .amosicon-selected-1
  • 说明
    .amosicon-shuoming
  • 视频全屏
    .amosicon-fullScreen
  • 退出全屏
    .amosicon-exitFullScreen
  • sql
    .amosicon-sql
  • hot
    .amosicon-hot
  • 打包
    .amosicon-dabao
  • history
    .amosicon-history
  • html
    .amosicon-html-copy
  • icon_menu_unfold_30x30
    .amosicon-sim-menu-unfold
  • 入门篇
    .amosicon-rumenpian
  • 环境
    .amosicon-huanjing
  • data
    .amosicon-data
  • 通用类_添加视图
    .amosicon-add-sub-view
  • 定制
    .amosicon-dingzhi
  • error
    .amosicon-error
  • check
    .amosicon-check
  • 选中
    .amosicon-xuanzhong7
  • 移除
    .amosicon-yichu1
  • 更多
    .amosicon-gengduo1
  • edit
    .amosicon-edit
  • folder-close
    .amosicon-folder-close
  • check-circle
    .amosicon-check-circle
  • 皮肤
    .amosicon-skin
  • workflow
    .amosicon-workflow
  • 成功
    .amosicon-duihao
  • tree
    .amosicon-single-tree
  • good
    .amosicon-good
  • template
    .amosicon-template
  • 减号
    .amosicon-jianhao
  • themeisle
    .amosicon-themeisle
  • 资源借用
    .amosicon-ziyuanjieyong
  • npm
    .amosicon-npm
  • 左箭头
    .amosicon-arrow-left
  • 返回
    .amosicon-fanhui
  • 列-表
    .amosicon-list
  • 向下 Down 1000
    .amosicon-i-down
  • video
    .amosicon-video-normal
  • 724编辑器_行间距
    .amosicon-spacing
  • 更多
    .amosicon-gengduo2
  • 业务
    .amosicon-business
  • 工程管理
    .amosicon-prj-mgmt
  • ray
    .amosicon-ray
  • 三道杠无填充
    .amosicon-sandaogangwutianchong
  • 上传视频
    .amosicon-shangchuanshipin2
  • desktop on-line statistics
    .amosicon-online-check
  • 标识类_添加文件夹
    .amosicon-biaoshilei_tianjiawenjianjia
  • 返回
    .amosicon-fanhui1
  • file-tree
    .amosicon-file-tree
  • 穿梭框
    .amosicon-chuansuokuang
  • eye-o
    .amosicon-eye-o
  • sass
    .amosicon-sass
  • number0
    .amosicon-number-0
  • number6
    .amosicon-number-6
  • number2
    .amosicon-number-2
  • number4
    .amosicon-number-4
  • number3
    .amosicon-number-3
  • number7
    .amosicon-number-7
  • number8
    .amosicon-number-8
  • number5
    .amosicon-number-5
  • number9
    .amosicon-number-9
  • number10
    .amosicon-number-10
  • qr-code
    .amosicon-qr-code
  • 关闭-半角
    .amosicon-guanbi
  • 移除
    .amosicon-jinrongtubiao_yichu
  • ruby
    .amosicon-ruby
  • 退出
    .amosicon-exit
  • 报警
    .amosicon-alarm-tip-single
  • number
    .amosicon-number-jing
  • chart-bar
    .amosicon-bar-chart
  • 工具
    .amosicon-tools-1
  • 移除
    .amosicon-yichu2
  • 定制
    .amosicon-dingzhi1
  • 详情consult
    .amosicon-tuwen_ic_data
  • menu-unfold
    .amosicon-thin-menu-unfold
  • 规范
    .amosicon-standard
  • success
    .amosicon-success-single
  • 环境
    .amosicon-env
  • 符号-文档
    .amosicon-wendang
  • history
    .amosicon-history-logs
  • 基 础管理
    .amosicon-basic-coms
  • 添加数据源
    .amosicon-database
  • 隐藏列
    .amosicon-hide
  • edit
    .amosicon-bianji
  • input
    .amosicon-luru
  • enty-out-storage
    .amosicon-querenchuku
  • setting
    .amosicon-shezhi
  • 下划线
    .amosicon-underline
  • 注销
    .amosicon-zhuxiao2
  • 定制
    .amosicon-dingzhi2
  • vue
    .amosicon-vuejs
  • 表格
    .amosicon-i-table
  • cancel
    .amosicon-cancel
  • java
    .amosicon-java
  • 更新日志
    .amosicon-update-log
  • 报警
    .amosicon-alarm-tip
  • 基础
    .amosicon-basic
  • 注销
    .amosicon-zhuxiao3
  • template
    .amosicon-template-copy
  • appStore
    .amosicon-appstore
  • video
    .amosicon-video
  • 入库
    .amosicon-ccgl-rukuyugao-8
  • 出库
    .amosicon-ccgl-chukucaozuo-13
  • html
    .amosicon-html
  • 选中
    .amosicon-angle-selected
  • 添加文件
    .amosicon-wenjiantianjia
  • Application
    .amosicon-application
  • 收 藏
    .amosicon-collection
  • 指引
    .amosicon-zhiyin1
  • 信封
    .amosicon-xinfeng
  • 图表
    .amosicon-tubiao
  • 单位
    .amosicon-danwei1
  • 卡片
    .amosicon-card
  • Webpack
    .amosicon-webpack-1
  • code
    .amosicon-code-hide
  • password
    .amosicon-password
  • 条纹码 条形码 条码
    .amosicon-bar-code
  • close
    .amosicon-close-circle
  • fire
    .amosicon-fire-thin
  • ALIGN LEFT
    .amosicon-align-left
  • ALIGN MIDDLE
    .amosicon-align-middle
  • 数据表格2
    .amosicon-data-table
  • code
    .amosicon-code-show
  • 晴-天气
    .amosicon-tianqi-qing
  • 天气_大风
    .amosicon-tianqi-dafeng
  • 天气_大雪
    .amosicon-tianqi-daxue
  • 天气_雷
    .amosicon-tianqi-lei
  • 天气_雨夹雪
    .amosicon-tianqi-yujiaxue
  • 天气_大雨
    .amosicon-tianqi-dayu
  • enzyme
    .amosicon-enzyme
  • 回到顶部
    .amosicon-huidaodingbu-copy
  • 视频上传
    .amosicon-shipinshangchuan
  • js
    .amosicon-js
  • .amosicon-minus-square
  • 右箭头
    .amosicon-arrow-right
  • 检查
    .amosicon-jiancha
  • 右下箭头
    .amosicon-right-bottom-arrow
  • table
    .amosicon-table
  • gulp
    .amosicon-gulp
  • react
    .amosicon-react
  • sass
    .amosicon-sass-1
  • 左上箭头
    .amosicon-arrow-left-top
  • tags
    .amosicon-tags
  • 组件库
    .amosicon-component-lib
  • 天气
    .amosicon-tianqi-qingzhuanduoyun
  • add
    .amosicon-add
  • 顶层
    .amosicon-dingceng
  • 底层
    .amosicon-diceng
  • initiate-assistance
    .amosicon-initiate-assistance
  • 维修记录
    .amosicon-weixiujilu
  • .amosicon-fire
  • 交互
    .amosicon-jiaohu-1
  • 交互随即查询
    .amosicon-jiaohu
  • 公文范例库
    .amosicon-store
  • postcss
    .amosicon-postcss
  • webpack
    .amosicon-webpack
  • 新增知识库
    .amosicon-add-knowledge
  • 重命名
    .amosicon-re-edit
  • 操作指南
    .amosicon-guide
  • 组织机构
    .amosicon-zuzhijigou
  • 交互图标
    .amosicon-hudong
  • 右上
    .amosicon-arrow-right-top-fat
  • 楼层设置
    .amosicon-floor-settings
  • caret-right
    .amosicon-caret-right
  • 首页
    .amosicon-home-1
  • menu fold
    .amosicon-thin-menu-fold
  • 业务
    .amosicon-biz
  • list
    .amosicon-list-rect
  • table
    .amosicon-table-1
  • react
    .amosicon-react-1
  • 右斜上箭头
    .amosicon-arrow-right-top
  • more
    .amosicon-number-more
  • 文档
    .amosicon-doc
  • 开发环境
    .amosicon-develop-env-1
  • 日期
    .amosicon-date
  • 开发环境
    .amosicon-develop-env
  • search
    .amosicon-search
  • 缩小
    .amosicon-zoom-out
  • 上移
    .amosicon-control-up
  • 下移
    .amosicon-control-down
  • 收缩
    .amosicon-shousuo
  • 展开
    .amosicon-zhankai
  • .amosicon-number
  • qr-code
    .amosicon-qr-code1
  • open-in-new
    .amosicon-open-in-new
  • 角色管理
    .amosicon-jiaoseguanli
  • 字体
    .amosicon-font-family
  • 斜体
    .amosicon-italic
  • 方向-右
    .amosicon-leftArrow
  • 表视图
    .amosicon-wulumuqishigongandashujuguanlipingtai-ico-
  • 设置
    .amosicon-set
  • 巡检路线
    .amosicon-xunjianluxian
  • 巡检记录
    .amosicon-xunjianjilu
  • 巡检计划
    .amosicon-xunjianjihua
  • 巡检点
    .amosicon-xunjiandian
  • 消息
    .amosicon-xiaoxi1
  • 任务安排
    .amosicon-renwuanpai
  • 检查项目
    .amosicon-jianchaxiangmu
  • 分类目录
    .amosicon-fenleimulu
  • 查询统计
    .amosicon-chaxuntongji
  • 可口可乐
    .amosicon-logo
  • 检查项
    .amosicon-jianchaxiang

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="amosicon amosicon-xxx"></span>

" amosicon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 编译
    #amosicon-compile
  • 下一页
    #amosicon-next-page
  • 左上
    #amosicon-arrow-left-top-thin
  • favorite
    #amosicon-favorite1
  • left
    #amosicon-left
  • 用户
    #amosicon-user1
  • 邮箱
    #amosicon-youxiang
  • 上一页
    #amosicon-pre-page
  • 下拉
    #amosicon-xiala
  • 添加
    #amosicon-add2
  • list
    #amosicon-list-dot
  • delete
    #amosicon-delete
  • 退出
    #amosicon-tuichu
  • 文件上传
    #amosicon-file-upload-2
  • 注销
    #amosicon-zhuxiao4
  • 邮箱
    #amosicon-youxiang1
  • 单位
    #amosicon-danwei
  • 刷新
    #amosicon-refresh
  • 更多
    #amosicon-gengduo
  • down
    #amosicon-down
  • chart pie
    #amosicon-pie-chart
  • user
    #amosicon-user
  • picture
    #amosicon-picture
  • 视频
    #amosicon-video1
  • folder
    #amosicon-folder
  • selected
    #amosicon-selected
  • ViewGallery
    #amosicon-viewgallery
  • Select all
    #amosicon-selectall
  • list
    #amosicon-list1
  • eye
    #amosicon-eye
  • right
    #amosicon-right
  • up
    #amosicon-up
  • 视频播放
    #amosicon-shipinbofang
  • 消息
    #amosicon-xiaoxi
  • 选中
    #amosicon-xuanzhong
  • 消息
    #amosicon-message
  • area-chart
    #amosicon-area-chart
  • 添加
    #amosicon-tianjia2
  • 视频
    #amosicon-shipin
  • python
    #amosicon-python
  • 声音
    #amosicon-shengyin
  • 消息
    #amosicon-xiaoxi2
  • question
    #amosicon-question
  • auto
    #amosicon-auto
  • task
    #amosicon-task
  • atm-away
    #amosicon-atmaway
  • cross
    #amosicon-cross1
  • fire
    #amosicon-fire-fat
  • 工具
    #amosicon-tools-2
  • 空气_阴天
    #amosicon-tianqi-yintian
  • 消息
    #amosicon-message-1
  • pin
    #amosicon-pin
  • 文件夹
    #amosicon-wenjianjia
  • full-screen
    #amosicon-full-screen
  • 消息
    #amosicon-tubiao15
  • 上传视频
    #amosicon-shangchuanshipin
  • warning
    #amosicon-warning
  • 上传文件
    #amosicon-file-upload-3
  • cross
    #amosicon-cross
  • cross-circle
    #amosicon-cross-circle
  • application
    #amosicon-application-1
  • link
    #amosicon-link
  • menu-unfold
    #amosicon-fat-menu-unfold
  • menu-fold
    #amosicon-fat-menu-fold
  • 选中
    #amosicon-xuanzhong1
  • 规范
    #amosicon-guifan
  • bars
    #amosicon-bars
  • bms_脚手架_库存
    #amosicon-scaffold-store
  • minus
    #amosicon-minus
  • 更多
    #amosicon-angle-more
  • 脚手架管理
    #amosicon-scaffold
  • notification
    #amosicon-notification
  • picture
    #amosicon-picture1
  • save
    #amosicon-save
  • file
    #amosicon-file
  • 放大
    #amosicon-zoom-in
  • ALIGN RIGHT
    #amosicon-align-right
  • success
    #amosicon-success
  • new-window
    #amosicon-window
  • 移除
    #amosicon-remove
  • 选中
    #amosicon-xuanzhong2
  • 注销
    #amosicon-zhuxiao
  • arrow-down-right
    #amosicon-down-right-arrow
  • folder-open
    #amosicon-folder-open
  • tree
    #amosicon-tree
  • warning
    #amosicon-danger
  • phone
    #amosicon-phone
  • 帮助
    #amosicon-help
  • 回到顶部
    #amosicon-huidaodingbu
  • subdirectory_arrow_right
    #amosicon-entry-sub-graph
  • 添加
    #amosicon-tianjia1
  • rightBottom_02
    #amosicon-right-bottom
  • 视频播放
    #amosicon-shipinbofang1
  • number
    #amosicon-number-1
  • 选中
    #amosicon-check1
  • 退出
    #amosicon-exit-3d
  • 指南
    #amosicon-zhinan
  • 警告
    #amosicon-jinggao
  • list
    #amosicon-list11
  • 选中
    #amosicon-xuanzhong3
  • WorkflowDesign
    #amosicon-workflow-design
  • WorkflowMonitoring
    #amosicon-workflow-monitor
  • task
    #amosicon-task-2
  • wxb报表
    #amosicon-wxbbaobiao
  • wxb工具
    #amosicon-wxbgongju
  • wxb搜索推广
    #amosicon-wxbsousuotuiguang
  • wxb定位
    #amosicon-wxbdingwei
  • setting
    #amosicon-setting
  • PLUS
    #amosicon-plus
  • favorite
    #amosicon-favorite
  • icon-toTop
    #amosicon-icontotop
  • copy
    #amosicon-copy
  • 更多
    #amosicon-gengduo-copy
  • 操作指南
    #amosicon-caozuo
  • test
    #amosicon-test
  • 标签1
    #amosicon-label
  • shouji
    #amosicon-shouji
  • 移除
    #amosicon-yichu
  • 工具
    #amosicon-tools
  • 首页-首页
    #amosicon-shouye1
  • 注销
    #amosicon-zhuxiao1
  • 回到顶部
    #amosicon-huidaodingbu1
  • home
    #amosicon-home
  • close
    #amosicon-close
  • 是的_right149
    #amosicon-down-right
  • ok
    #amosicon-ok
  • 首页
    #amosicon-shouye
  • 上传文件
    #amosicon-file-upload
  • 退出
    #amosicon-exit-fat
  • tree
    #amosicon-tree1
  • setting
    #amosicon-setting1
  • 回到顶部
    #amosicon-huidaodingbu2
  • 视频
    #amosicon-shipin1
  • info
    #amosicon-info
  • toTop
    #amosicon-totop
  • paper-clip
    #amosicon-paper-clip
  • play-video-button
    #amosicon-playvideobutton
  • file
    #amosicon-file-lef
  • 字符
    #amosicon-char
  • 选中
    #amosicon-xuanzhong4
  • task
    #amosicon-task-1
  • 上传文件
    #amosicon-shangchuanwenjian
  • 订单关闭
    #amosicon-dingdanguanbi
  • 加粗
    #amosicon-bold
  • clock
    #amosicon-clock
  • 上传视频
    #amosicon-video-upload
  • 声音
    #amosicon-voice
  • 指引
    #amosicon-zhiyin
  • icon_menu_fold_30x30
    #amosicon-sim-menu-fold
  • 天气_暴雪
    #amosicon-tianqi-baoxue
  • 天气_冰雹
    #amosicon-tianqi-bingbao
  • 天气_风暴
    #amosicon-tianqi-fengbao
  • 天气_雷阵雨
    #amosicon-tianqi-leizhenyu
  • 天气_小雪
    #amosicon-tianqi-xiaoxue
  • 天气_小雨
    #amosicon-tianqi-xiaoyu
  • 天气_阵雪
    #amosicon-tianqi-zhenxue
  • 天气_阵雨
    #amosicon-tianqi-zhenyu
  • 天气_中雪
    #amosicon-tianqi-zhongxue
  • 天气_中雨
    #amosicon-tianqi-zhongyu
  • 选中
    #amosicon-selected-1
  • 说明
    #amosicon-shuoming
  • 视频全屏
    #amosicon-fullScreen
  • 退出全屏
    #amosicon-exitFullScreen
  • sql
    #amosicon-sql
  • hot
    #amosicon-hot
  • 打包
    #amosicon-dabao
  • history
    #amosicon-history
  • html
    #amosicon-html-copy
  • icon_menu_unfold_30x30
    #amosicon-sim-menu-unfold
  • 入门篇
    #amosicon-rumenpian
  • 环境
    #amosicon-huanjing
  • data
    #amosicon-data
  • 通用类_添加视图
    #amosicon-add-sub-view
  • 定制
    #amosicon-dingzhi
  • error
    #amosicon-error
  • check
    #amosicon-check
  • 选中
    #amosicon-xuanzhong7
  • 移除
    #amosicon-yichu1
  • 更多
    #amosicon-gengduo1
  • edit
    #amosicon-edit
  • folder-close
    #amosicon-folder-close
  • check-circle
    #amosicon-check-circle
  • 皮肤
    #amosicon-skin
  • workflow
    #amosicon-workflow
  • 成功
    #amosicon-duihao
  • tree
    #amosicon-single-tree
  • good
    #amosicon-good
  • template
    #amosicon-template
  • 减号
    #amosicon-jianhao
  • themeisle
    #amosicon-themeisle
  • 资源借用
    #amosicon-ziyuanjieyong
  • npm
    #amosicon-npm
  • 左箭头
    #amosicon-arrow-left
  • 返回
    #amosicon-fanhui
  • 列-表
    #amosicon-list
  • 向下 Down 1000
    #amosicon-i-down
  • video
    #amosicon-video-normal
  • 724编辑器_行间距
    #amosicon-spacing
  • 更多
    #amosicon-gengduo2
  • 业务
    #amosicon-business
  • 工程管理
    #amosicon-prj-mgmt
  • ray
    #amosicon-ray
  • 三道杠无填充
    #amosicon-sandaogangwutianchong
  • 上传视频
    #amosicon-shangchuanshipin2
  • desktop on-line statistics
    #amosicon-online-check
  • 标识类_添加文件夹
    #amosicon-biaoshilei_tianjiawenjianjia
  • 返回
    #amosicon-fanhui1
  • file-tree
    #amosicon-file-tree
  • 穿梭框
    #amosicon-chuansuokuang
  • eye-o
    #amosicon-eye-o
  • sass
    #amosicon-sass
  • number0
    #amosicon-number-0
  • number6
    #amosicon-number-6
  • number2
    #amosicon-number-2
  • number4
    #amosicon-number-4
  • number3
    #amosicon-number-3
  • number7
    #amosicon-number-7
  • number8
    #amosicon-number-8
  • number5
    #amosicon-number-5
  • number9
    #amosicon-number-9
  • number10
    #amosicon-number-10
  • qr-code
    #amosicon-qr-code
  • 关闭-半角
    #amosicon-guanbi
  • 移除
    #amosicon-jinrongtubiao_yichu
  • ruby
    #amosicon-ruby
  • 退出
    #amosicon-exit
  • 报警
    #amosicon-alarm-tip-single
  • number
    #amosicon-number-jing
  • chart-bar
    #amosicon-bar-chart
  • 工具
    #amosicon-tools-1
  • 移除
    #amosicon-yichu2
  • 定制
    #amosicon-dingzhi1
  • 详情consult
    #amosicon-tuwen_ic_data
  • menu-unfold
    #amosicon-thin-menu-unfold
  • 规范
    #amosicon-standard
  • success
    #amosicon-success-single
  • 环境
    #amosicon-env
  • 符号-文档
    #amosicon-wendang
  • history
    #amosicon-history-logs
  • 基 础管理
    #amosicon-basic-coms
  • 添加数据源
    #amosicon-database
  • 隐藏列
    #amosicon-hide
  • edit
    #amosicon-bianji
  • input
    #amosicon-luru
  • enty-out-storage
    #amosicon-querenchuku
  • setting
    #amosicon-shezhi
  • 下划线
    #amosicon-underline
  • 注销
    #amosicon-zhuxiao2
  • 定制
    #amosicon-dingzhi2
  • vue
    #amosicon-vuejs
  • 表格
    #amosicon-i-table
  • cancel
    #amosicon-cancel
  • java
    #amosicon-java
  • 更新日志
    #amosicon-update-log
  • 报警
    #amosicon-alarm-tip
  • 基础
    #amosicon-basic
  • 注销
    #amosicon-zhuxiao3
  • template
    #amosicon-template-copy
  • appStore
    #amosicon-appstore
  • video
    #amosicon-video
  • 入库
    #amosicon-ccgl-rukuyugao-8
  • 出库
    #amosicon-ccgl-chukucaozuo-13
  • html
    #amosicon-html
  • 选中
    #amosicon-angle-selected
  • 添加文件
    #amosicon-wenjiantianjia
  • Application
    #amosicon-application
  • 收 藏
    #amosicon-collection
  • 指引
    #amosicon-zhiyin1
  • 信封
    #amosicon-xinfeng
  • 图表
    #amosicon-tubiao
  • 单位
    #amosicon-danwei1
  • 卡片
    #amosicon-card
  • Webpack
    #amosicon-webpack-1
  • code
    #amosicon-code-hide
  • password
    #amosicon-password
  • 条纹码 条形码 条码
    #amosicon-bar-code
  • close
    #amosicon-close-circle
  • fire
    #amosicon-fire-thin
  • ALIGN LEFT
    #amosicon-align-left
  • ALIGN MIDDLE
    #amosicon-align-middle
  • 数据表格2
    #amosicon-data-table
  • code
    #amosicon-code-show
  • 晴-天气
    #amosicon-tianqi-qing
  • 天气_大风
    #amosicon-tianqi-dafeng
  • 天气_大雪
    #amosicon-tianqi-daxue
  • 天气_雷
    #amosicon-tianqi-lei
  • 天气_雨夹雪
    #amosicon-tianqi-yujiaxue
  • 天气_大雨
    #amosicon-tianqi-dayu
  • enzyme
    #amosicon-enzyme
  • 回到顶部
    #amosicon-huidaodingbu-copy
  • 视频上传
    #amosicon-shipinshangchuan
  • js
    #amosicon-js
  • #amosicon-minus-square
  • 右箭头
    #amosicon-arrow-right
  • 检查
    #amosicon-jiancha
  • 右下箭头
    #amosicon-right-bottom-arrow
  • table
    #amosicon-table
  • gulp
    #amosicon-gulp
  • react
    #amosicon-react
  • sass
    #amosicon-sass-1
  • 左上箭头
    #amosicon-arrow-left-top
  • tags
    #amosicon-tags
  • 组件库
    #amosicon-component-lib
  • 天气
    #amosicon-tianqi-qingzhuanduoyun
  • add
    #amosicon-add
  • 顶层
    #amosicon-dingceng
  • 底层
    #amosicon-diceng
  • initiate-assistance
    #amosicon-initiate-assistance
  • 维修记录
    #amosicon-weixiujilu
  • #amosicon-fire
  • 交互
    #amosicon-jiaohu-1
  • 交互随即查询
    #amosicon-jiaohu
  • 公文范例库
    #amosicon-store
  • postcss
    #amosicon-postcss
  • webpack
    #amosicon-webpack
  • 新增知识库
    #amosicon-add-knowledge
  • 重命名
    #amosicon-re-edit
  • 操作指南
    #amosicon-guide
  • 组织机构
    #amosicon-zuzhijigou
  • 交互图标
    #amosicon-hudong
  • 右上
    #amosicon-arrow-right-top-fat
  • 楼层设置
    #amosicon-floor-settings
  • caret-right
    #amosicon-caret-right
  • 首页
    #amosicon-home-1
  • menu fold
    #amosicon-thin-menu-fold
  • 业务
    #amosicon-biz
  • list
    #amosicon-list-rect
  • table
    #amosicon-table-1
  • react
    #amosicon-react-1
  • 右斜上箭头
    #amosicon-arrow-right-top
  • more
    #amosicon-number-more
  • 文档
    #amosicon-doc
  • 开发环境
    #amosicon-develop-env-1
  • 日期
    #amosicon-date
  • 开发环境
    #amosicon-develop-env
  • search
    #amosicon-search
  • 缩小
    #amosicon-zoom-out
  • 上移
    #amosicon-control-up
  • 下移
    #amosicon-control-down
  • 收缩
    #amosicon-shousuo
  • 展开
    #amosicon-zhankai
  • #amosicon-number
  • qr-code
    #amosicon-qr-code1
  • open-in-new
    #amosicon-open-in-new
  • 角色管理
    #amosicon-jiaoseguanli
  • 字体
    #amosicon-font-family
  • 斜体
    #amosicon-italic
  • 方向-右
    #amosicon-leftArrow
  • 表视图
    #amosicon-wulumuqishigongandashujuguanlipingtai-ico-
  • 设置
    #amosicon-set
  • 巡检路线
    #amosicon-xunjianluxian
  • 巡检记录
    #amosicon-xunjianjilu
  • 巡检计划
    #amosicon-xunjianjihua
  • 巡检点
    #amosicon-xunjiandian
  • 消息
    #amosicon-xiaoxi1
  • 任务安排
    #amosicon-renwuanpai
  • 检查项目
    #amosicon-jianchaxiangmu
  • 分类目录
    #amosicon-fenleimulu
  • 查询统计
    #amosicon-chaxuntongji
  • 可口可乐
    #amosicon-logo
  • 检查项
    #amosicon-jianchaxiang

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>