• 赞赏
    
  • logo-github
    
  • logo-angular
    
  • logo-bitbucket
    
  • logo-bitcoin
    
  • logo-designernews
    
  • logo-closed-captioning
    
  • logo-css3
    
  • logo-dropbox
    
  • logo-aperture
    
  • logo-apple
    
  • logo-chrome
    
  • logo-ionitron
    
  • logo-html5
    
  • logo-android
    
  • logo-codepen
    
  • logo-ionic
    
  • logo-polymer
    
  • logo-octocat
    
  • logo-game-controller-b
    
  • logo-pinterest
    
  • logo-freebsd-devil
    
  • logo-nodejs
    
  • logo-model-s
    
  • logo-sass
    
  • logo-reddit
    
  • logo-twitch
    
  • logo-tux
    
  • logo-playstation
    
  • logo-xbox
    
  • logo-windows
    
  • logo-python
    
  • logo-steam
    
  • logo-snapchat
    
  • sr-核心系统
    
  • sr-工业设计
    
  • sr-共享展厅
    
  • sr-计算机开发
    
  • sr-技术难题解决
    
  • sr-技术交易价格评估系统
    
  • sr-技术服务商
    
  • sr-机构认证
    
  • sr-工商财税
    
  • sr-技术需求预测系统
    
  • sr-技术诊断
    
  • sr-技术需求预测
    
  • sr-合作机构
    
  • sr-技术通
    
  • sr-科技成果
    
  • sr-技术转移服务
    
  • sr-讲坛
    
  • sr-科技服务
    
  • sr-科技培训
    
  • sr-技术专家
    
  • sr-各级政府
    
  • sr-技术成果
    
  • sr-录播申请
    
  • sr-科技项目
    
  • sr-解决方案
    
  • sr-热门推荐
    
  • sr-科技企业
    
  • sr-精选优品
    
  • sr-企业精准获客系统
    
  • sr-品牌设计
    
  • sr-区域技术市场
    
  • sr-软著预测
    
  • sr-商标预测
    
  • sr-项目路演
    
  • sr-实名认证
    
  • sr-投资意向预测
    
  • sr-我的订阅
    
  • sr-我的需求
    
  • sr-生产企业
    
  • sr-企业认证
    
  • sr-收藏关注
    
  • sr-校地合作
    
  • sr-研究院所
    
  • sr-需求直通车
    
  • sr-消息中心
    
  • sr-信息完善
    
  • sr-需求订阅
    
  • sr-演播室
    
  • sr-院士工作站
    
  • sr-优质供应商
    
  • sr-园区服务
    
  • sr-政策智配
    
  • sr-找成果
    
  • sr-找高校
    
  • sr-重点广告位
    
  • sr-找活动
    
  • sr-直播申请
    
  • sr-园区
    
  • sr-账号安全
    
  • sr-找专家
    
  • sr-政策指南针
    
  • sr-找专利
    
  • sr-找需求
    
  • sr-政务外包
    
  • sr-在线技术交易系统
    
  • sr-在线展会
    
  • sr-专利预测
    
  • sr-知识产权
    
  • sr-产学研合作
    
  • sr-产业智推
    
  • sr-成果直通车
    
  • sr-创新服务
    
  • sr-产业应用系统
    
  • sr-发布问答
    
  • sr-产业技术联盟
    
  • sr-产学研平台
    
  • sr-创新能力分析系统
    
  • sr-个人认证
    
  • sr-服务订阅
    
  • sr-产业大数据服务平台
    
  • sr-各级政府
    
  • sr-共享展厅
    
  • sr-成果转化服务
    
  • sr-合作机构
    
  • sr-工商财税
    
  • sr-发布技术
    
  • sr-工业设计
    
  • sr-技术成果
    
  • sr-服务机构
    
  • sr-计算机开发
    
  • sr-发布活动
    
  • sr-技术通
    
  • sr-技术难题解决
    
  • sr-技术诊断
    
  • sr-技术专家
    
  • sr-技术需求预测系统
    
  • sr-机构认证
    
  • sr-高校
    
  • sr-解决方案
    
  • sr-核心系统
    
  • sr-精选优品
    
  • sr-科技培训
    
  • sr-技术服务商
    
  • sr-科技企业
    
  • sr-技术交易价格评估系统
    
  • sr-技术需求预测
    
  • sr-技术转移服务
    
  • sr-品牌设计
    
  • sr-录播申请
    
  • sr-科技服务
    
  • sr-热门推荐
    
  • sr-区域技术市场
    
  • sr-企业精准获客系统
    
  • sr-科技成果
    
  • sr-科技项目
    
  • sr-讲坛
    
  • sr-软著预测
    
  • sr-投资意向预测
    
  • sr-我的订阅
    
  • sr-我的需求
    
  • sr-实名认证
    
  • sr-企业认证
    
  • sr-收藏关注
    
  • sr-校地合作
    
  • sr-项目路演
    
  • sr-信息完善
    
  • sr-需求订阅
    
  • sr-消息中心
    
  • sr-研究院所
    
  • sr-演播室
    
  • sr-需求直通车
    
  • sr-院士工作站
    
  • sr-园区服务
    
  • sr-优质供应商
    
  • sr-商标预测
    
  • sr-园区
    
  • sr-生产企业
    
  • sr-账号安全
    
  • sr-找需求
    
  • sr-找活动
    
  • sr-在线展会
    
  • sr-政策智配
    
  • sr-找专家
    
  • sr-找高校
    
  • sr-找专利
    
  • sr-知识产权
    
  • sr-直播申请
    
  • sr-政策指南针
    
  • sr-重点广告位
    
  • sr-专利预测
    
  • sr-在线技术交易系统
    
  • sr-找成果
    
  • sr-政务外包
    
  • sr-国际创新中心
    
  • sr-产学研平台
    
  • sr-产业大数据服务平台
    
  • sr-产学研合作
    
  • sr-成果转化服务
    
  • sr-创新服务
    
  • sr-产业智推
    
  • sr-服务机构
    
  • sr-发布活动
    
  • sr-服务订阅
    
  • sr-创新能力分析系统
    
  • sr-产业技术联盟
    
  • sr-个人认证
    
  • sr-发布技术
    
  • sr-产业应用系统
    
  • sr-高校
    
  • sr-成果直通车
    
  • sr-发布问答
    
  • sr-国际创新中心
    
  • nav,菜单
    
  • nav,菜单
    
  • nav,菜单
    
  • nav,菜单
    
  • nav,菜单
    
  • nav-fill,菜单
    
  • add-bookmark-fill,新增书签
    
  • empty-bookmark-fill,空书签
    
  • delete-bookmark-fill,删除书签
    
  • arrow-bottom-fill,底部箭头
    
  • arrow-top-fill,顶部箭头
    
  • arrow-left-fill,左侧箭头
    
  • arrow-right-fill,右侧箭头
    
  • breadcrumb-fill,面包屑
    
  • close-fill,关闭
    
  • new-fill,新增
    
  • remove-fill,移除
    
  • eye-fill,开眼
    
  • eye-off-fill,闭眼
    
  • home-fill,首页
    
  • unlock-fill,开锁
    
  • lock-fill,首页
    
  • mini-fill,最小
    
  • max-fill,最大
    
  • security-fill,保护
    
  • nosecurity-fill,无保护
    
  • news-fill,文章
    
  • setting-fill,设置
    
  • send-fill,发送
    
  • search-fill,搜索
    
  • save-fill,保存
    
  • refresh-fill,刷新
    
  • star-fill,星星
    
  • trash-can-fill,垃圾桶
    
  • zoom-max-fill,放大
    
  • zoom-mini-fill,缩小
    
  • success-fill,成功
    
  • inbox-fill,邮箱
    
  • power-fill,退出
    
  • folder-fill,文件夹
    
  • file-fill,文件
    
  • mail-fill,信
    
  • link-fill,点赞
    
  • dislink-fill,差评
    
  • calendar-fill,日历
    
  • notification-fill,消息
    
  • note-fill,笔记
    
  • document-fill,文档
    
  • download-fill,下载
    
  • upload-fill,上传
    
  • storage-fill,云
    
  • storageup-fill,云上
    
  • storagedown-fill,云下
    
  • editor-fill,编辑
    
  • time-fill,时间
    
  • user-fill,用户
    
  • nav-tool,菜单工具
    
  • checkbox-ok-fill,选择成功
    
  • checkbox-fill,空选择框
    
  • screenfull-fill,全屏
    
  • trash,垃圾桶
    
  • play-fill,开始
    
  • pause-fill,暂停
    
  • print-fill,打印
    
  • dashboard-fill,仪表盘
    
  • storagedown,云下
    
  • editor,编辑
    
  • check,选择
    
  • time,时间
    
  • user,用户
    
  • play,开始
    
  • pause,暂停
    
  • print,打印
    
  • dashboard,仪表盘
    
  • add-bookmark,新增书签
    
  • empty-bookmark,空书签
    
  • delete-bookmark,删除书签
    
  • arrow-bottom,底部箭头
    
  • arrow-top,顶部箭头
    
  • arrow-left,左侧箭头
    
  • arrow-right,右侧箭头
    
  • breadcrumb,面包屑
    
  • close,关闭
    
  • new,新增
    
  • remove,移除
    
  • eye,开眼
    
  • eye-off,闭眼
    
  • home,首页
    
  • unlock,开锁
    
  • lock,锁
    
  • mini,最小
    
  • max,最大
    
  • security,保护
    
  • nosecurity,无保护
    
  • news,文章
    
  • setting,设置
    
  • send,发送
    
  • search,搜索
    
  • save,保存
    
  • refresh,刷新
    
  • star,星星
    
  • trash-can,垃圾桶
    
  • zoom-max,放大
    
  • zoom-mini,缩小
    
  • success,成功
    
  • inbox,邮箱
    
  • power,退出
    
  • folder,文件夹
    
  • file,文件
    
  • mail,信
    
  • link,点赞
    
  • dislink,差评
    
  • calendar,日历
    
  • notification,消息
    
  • note,笔记
    
  • document,文档
    
  • download,下载
    
  • upload,上传
    
  • storage,云
    
  • storageup,云上
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'nlyfont';
  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#nlyfont') format('svg');
}

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

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

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

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

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

  • 赞赏
    .nly-icon-zanshang
  • logo-github
    .nly-icon-logo-github
  • logo-angular
    .nly-icon-logo-angular
  • logo-bitbucket
    .nly-icon-logo-bitbucket
  • logo-bitcoin
    .nly-icon-logo-bitcoin
  • logo-designernews
    .nly-icon-logo-designernews
  • logo-closed-captioning
    .nly-icon-logo-closed-captioning
  • logo-css3
    .nly-icon-logo-css
  • logo-dropbox
    .nly-icon-logo-dropbox
  • logo-aperture
    .nly-icon-logo-aperture
  • logo-apple
    .nly-icon-logo-apple
  • logo-chrome
    .nly-icon-logo-chrome
  • logo-ionitron
    .nly-icon-logo-ionitron
  • logo-html5
    .nly-icon-logo-html
  • logo-android
    .nly-icon-logo-android
  • logo-codepen
    .nly-icon-logo-codepen
  • logo-ionic
    .nly-icon-logo-ionic
  • logo-polymer
    .nly-icon-logo-polymer
  • logo-octocat
    .nly-icon-logo-octocat
  • logo-game-controller-b
    .nly-icon-logo-game-controller-b
  • logo-pinterest
    .nly-icon-logo-pinterest
  • logo-freebsd-devil
    .nly-icon-logo-freebsd-devil
  • logo-nodejs
    .nly-icon-logo-nodejs
  • logo-model-s
    .nly-icon-logo-model-s
  • logo-sass
    .nly-icon-logo-sass
  • logo-reddit
    .nly-icon-logo-reddit
  • logo-twitch
    .nly-icon-logo-twitch
  • logo-tux
    .nly-icon-logo-tux
  • logo-playstation
    .nly-icon-logo-playstation
  • logo-xbox
    .nly-icon-logo-xbox
  • logo-windows
    .nly-icon-logo-windows
  • logo-python
    .nly-icon-logo-python
  • logo-steam
    .nly-icon-logo-steam
  • logo-snapchat
    .nly-icon-logo-snapchat
  • sr-核心系统
    .nly-icon-sr-hexinxitong
  • sr-工业设计
    .nly-icon-sr-gongyesheji
  • sr-共享展厅
    .nly-icon-sr-gongxiangzhanting
  • sr-计算机开发
    .nly-icon-sr-jisuanjikaifa
  • sr-技术难题解决
    .nly-icon-sr-jishunantijiejue
  • sr-技术交易价格评估系统
    .nly-icon-sr-jishujiaoyijiagepingguxitong
  • sr-技术服务商
    .nly-icon-sr-jishufuwushang
  • sr-机构认证
    .nly-icon-sr-jigourenzheng
  • sr-工商财税
    .nly-icon-sr-gongshangcaishui
  • sr-技术需求预测系统
    .nly-icon-sr-jishuxuqiuyucexitong
  • sr-技术诊断
    .nly-icon-sr-jishuzhenduan
  • sr-技术需求预测
    .nly-icon-sr-jishuxuqiuyuce
  • sr-合作机构
    .nly-icon-sr-hezuojigou
  • sr-技术通
    .nly-icon-sr-jishutong
  • sr-科技成果
    .nly-icon-sr-kejichengguo
  • sr-技术转移服务
    .nly-icon-sr-jishuzhuanyifuwu
  • sr-讲坛
    .nly-icon-sr-jiangtan
  • sr-科技服务
    .nly-icon-sr-kejifuwu
  • sr-科技培训
    .nly-icon-sr-kejipeixun
  • sr-技术专家
    .nly-icon-sr-jishuzhuanjia
  • sr-各级政府
    .nly-icon-sr-gejizhengfu
  • sr-技术成果
    .nly-icon-sr-jishuchengguo
  • sr-录播申请
    .nly-icon-sr-luboshenqing
  • sr-科技项目
    .nly-icon-sr-kejixiangmu
  • sr-解决方案
    .nly-icon-sr-jiejuefangan
  • sr-热门推荐
    .nly-icon-sr-rementuijian
  • sr-科技企业
    .nly-icon-sr-kejiqiye
  • sr-精选优品
    .nly-icon-sr-jingxuanyoupin
  • sr-企业精准获客系统
    .nly-icon-sr-qiyejingzhunhuokexitong
  • sr-品牌设计
    .nly-icon-sr-pinpaisheji
  • sr-区域技术市场
    .nly-icon-sr-quyujishushichang
  • sr-软著预测
    .nly-icon-sr-ruanzhuyuce
  • sr-商标预测
    .nly-icon-sr-shangbiaoyuce
  • sr-项目路演
    .nly-icon-sr-xiangmuluyan
  • sr-实名认证
    .nly-icon-sr-shimingrenzheng
  • sr-投资意向预测
    .nly-icon-sr-touziyixiangyuce
  • sr-我的订阅
    .nly-icon-sr-wodedingyue
  • sr-我的需求
    .nly-icon-sr-wodexuqiu
  • sr-生产企业
    .nly-icon-sr-shengchanqiye
  • sr-企业认证
    .nly-icon-sr-qiyerenzheng
  • sr-收藏关注
    .nly-icon-sr-shoucangguanzhu
  • sr-校地合作
    .nly-icon-sr-xiaodihezuo
  • sr-研究院所
    .nly-icon-sr-yanjiuyuansuo
  • sr-需求直通车
    .nly-icon-sr-xuqiuzhitongche
  • sr-消息中心
    .nly-icon-sr-xiaoxizhongxin
  • sr-信息完善
    .nly-icon-sr-xinxiwanshan
  • sr-需求订阅
    .nly-icon-sr-xuqiudingyue
  • sr-演播室
    .nly-icon-sr-yanboshi
  • sr-院士工作站
    .nly-icon-sr-yuanshigongzuozhan
  • sr-优质供应商
    .nly-icon-sr-youzhigongyingshang
  • sr-园区服务
    .nly-icon-sr-yuanqufuwu
  • sr-政策智配
    .nly-icon-sr-zhengcezhipei
  • sr-找成果
    .nly-icon-sr-zhaochengguo
  • sr-找高校
    .nly-icon-sr-zhaogaoxiao
  • sr-重点广告位
    .nly-icon-sr-zhongdianguanggaowei
  • sr-找活动
    .nly-icon-sr-zhaohuodong
  • sr-直播申请
    .nly-icon-sr-zhiboshenqing
  • sr-园区
    .nly-icon-sr-yuanqu
  • sr-账号安全
    .nly-icon-sr-zhanghaoanquan
  • sr-找专家
    .nly-icon-sr-zhaozhuanjia
  • sr-政策指南针
    .nly-icon-sr-zhengcezhinanzhen
  • sr-找专利
    .nly-icon-sr-zhaozhuanli
  • sr-找需求
    .nly-icon-sr-zhaoxuqiu
  • sr-政务外包
    .nly-icon-sr-zhengwuwaibao
  • sr-在线技术交易系统
    .nly-icon-sr-zaixianjishujiaoyixitong
  • sr-在线展会
    .nly-icon-sr-zaixianzhanhui
  • sr-专利预测
    .nly-icon-sr-zhuanliyuce
  • sr-知识产权
    .nly-icon-sr-zhishichanquan
  • sr-产学研合作
    .nly-icon-sr-chanxueyanhezuo-fill
  • sr-产业智推
    .nly-icon-sr-chanyezhitui-fill
  • sr-成果直通车
    .nly-icon-sr-chengguozhitongche-fill
  • sr-创新服务
    .nly-icon-sr-chuangxinfuwu-fill
  • sr-产业应用系统
    .nly-icon-sr-chanyeyingyongxitong-fill
  • sr-发布问答
    .nly-icon-sr-fabuwenda-fill
  • sr-产业技术联盟
    .nly-icon-sr-chanyejishulianmeng-fill
  • sr-产学研平台
    .nly-icon-sr-chanxueyanpingtai-fill
  • sr-创新能力分析系统
    .nly-icon-sr-chuangxinnenglifenxixitong-fill
  • sr-个人认证
    .nly-icon-sr-gerenrenzheng-fill
  • sr-服务订阅
    .nly-icon-sr-fuwudingyue-fill
  • sr-产业大数据服务平台
    .nly-icon-sr-chanyedashujufuwupingtai-fill
  • sr-各级政府
    .nly-icon-sr-gejizhengfu-fill
  • sr-共享展厅
    .nly-icon-sr-gongxiangzhanting-fill
  • sr-成果转化服务
    .nly-icon-sr-chengguozhuanhuafuwu-fill
  • sr-合作机构
    .nly-icon-sr-hezuojigou-fill
  • sr-工商财税
    .nly-icon-sr-gongshangcaishui-fill
  • sr-发布技术
    .nly-icon-sr-fabujishu-fill
  • sr-工业设计
    .nly-icon-sr-gongyesheji-fill
  • sr-技术成果
    .nly-icon-sr-jishuchengguo-fill
  • sr-服务机构
    .nly-icon-sr-fuwujigou-fill
  • sr-计算机开发
    .nly-icon-sr-jisuanjikaifa-fill
  • sr-发布活动
    .nly-icon-sr-fabuhuodong-fill
  • sr-技术通
    .nly-icon-sr-jishutong-fill
  • sr-技术难题解决
    .nly-icon-sr-jishunantijiejue-fill
  • sr-技术诊断
    .nly-icon-sr-jishuzhenduan-fill
  • sr-技术专家
    .nly-icon-sr-jishuzhuanjia-fill
  • sr-技术需求预测系统
    .nly-icon-sr-jishuxuqiuyucexitong-fill
  • sr-机构认证
    .nly-icon-sr-jigourenzheng-fill
  • sr-高校
    .nly-icon-sr-gaoxiao-fill
  • sr-解决方案
    .nly-icon-sr-jiejuefangan-fill
  • sr-核心系统
    .nly-icon-sr-hexinxitong-fill
  • sr-精选优品
    .nly-icon-sr-jingxuanyoupin-fill
  • sr-科技培训
    .nly-icon-sr-kejipeixun-fill
  • sr-技术服务商
    .nly-icon-sr-jishufuwushang-fill
  • sr-科技企业
    .nly-icon-sr-kejiqiye-fill
  • sr-技术交易价格评估系统
    .nly-icon-sr-jishujiaoyijiagepingguxitong-fill
  • sr-技术需求预测
    .nly-icon-sr-jishuxuqiuyuce-fill
  • sr-技术转移服务
    .nly-icon-sr-jishuzhuanyifuwu-fill
  • sr-品牌设计
    .nly-icon-sr-pinpaisheji-fill
  • sr-录播申请
    .nly-icon-sr-luboshenqing-fill
  • sr-科技服务
    .nly-icon-sr-kejifuwu-fill
  • sr-热门推荐
    .nly-icon-sr-rementuijian-fill
  • sr-区域技术市场
    .nly-icon-sr-quyujishushichang-fill
  • sr-企业精准获客系统
    .nly-icon-sr-qiyejingzhunhuokexitong-fill
  • sr-科技成果
    .nly-icon-sr-kejichengguo-fill
  • sr-科技项目
    .nly-icon-sr-kejixiangmu-fill
  • sr-讲坛
    .nly-icon-sr-jiangtan-fill
  • sr-软著预测
    .nly-icon-sr-ruanzhuyuce-fill
  • sr-投资意向预测
    .nly-icon-sr-touziyixiangyuce-fill
  • sr-我的订阅
    .nly-icon-sr-wodedingyue-fill
  • sr-我的需求
    .nly-icon-sr-wodexuqiu-fill
  • sr-实名认证
    .nly-icon-sr-shimingrenzheng-fill
  • sr-企业认证
    .nly-icon-sr-qiyerenzheng-fill
  • sr-收藏关注
    .nly-icon-sr-shoucangguanzhu-fill
  • sr-校地合作
    .nly-icon-sr-xiaodihezuo-fill
  • sr-项目路演
    .nly-icon-sr-xiangmuluyan-fill
  • sr-信息完善
    .nly-icon-sr-xinxiwanshan-fill
  • sr-需求订阅
    .nly-icon-sr-xuqiudingyue-fill
  • sr-消息中心
    .nly-icon-sr-xiaoxizhongxin-fill
  • sr-研究院所
    .nly-icon-sr-yanjiuyuansuo-fill
  • sr-演播室
    .nly-icon-sr-yanboshi-fill
  • sr-需求直通车
    .nly-icon-sr-xuqiuzhitongche-fill
  • sr-院士工作站
    .nly-icon-sr-yuanshigongzuozhan-fill
  • sr-园区服务
    .nly-icon-sr-yuanqufuwu-fill
  • sr-优质供应商
    .nly-icon-sr-youzhigongyingshang-fill
  • sr-商标预测
    .nly-icon-sr-shangbiaoyuce-fill
  • sr-园区
    .nly-icon-sr-yuanqu-fill
  • sr-生产企业
    .nly-icon-sr-shengchanqiye-fill
  • sr-账号安全
    .nly-icon-sr-zhanghaoanquan-fill
  • sr-找需求
    .nly-icon-sr-zhaoxuqiu-fill
  • sr-找活动
    .nly-icon-sr-zhaohuodong-fill
  • sr-在线展会
    .nly-icon-sr-zaixianzhanhui-fill
  • sr-政策智配
    .nly-icon-sr-zhengcezhipei-fill
  • sr-找专家
    .nly-icon-sr-zhaozhuanjia-fill
  • sr-找高校
    .nly-icon-sr-zhaogaoxiao-fill
  • sr-找专利
    .nly-icon-sr-zhaozhuanli-fill
  • sr-知识产权
    .nly-icon-sr-zhishichanquan-fill
  • sr-直播申请
    .nly-icon-sr-zhiboshenqing-fill
  • sr-政策指南针
    .nly-icon-sr-zhengcezhinanzhen-fill
  • sr-重点广告位
    .nly-icon-sr-zhongdianguanggaowei-fill
  • sr-专利预测
    .nly-icon-sr-zhuanliyuce-fill
  • sr-在线技术交易系统
    .nly-icon-sr-zaixianjishujiaoyixitong-fill
  • sr-找成果
    .nly-icon-sr-zhaochengguo-fill
  • sr-政务外包
    .nly-icon-sr-zhengwuwaibao-fill
  • sr-国际创新中心
    .nly-icon-sr-guojichuangxinzhongxin-fill
  • sr-产学研平台
    .nly-icon-sr-chanxueyanpingtai
  • sr-产业大数据服务平台
    .nly-icon-sr-chanyedashujufuwupingtai
  • sr-产学研合作
    .nly-icon-sr-chanxueyanhezuo
  • sr-成果转化服务
    .nly-icon-sr-chengguozhuanhuafuwu
  • sr-创新服务
    .nly-icon-sr-chuangxinfuwu
  • sr-产业智推
    .nly-icon-sr-chanyezhitui
  • sr-服务机构
    .nly-icon-sr-fuwujigou
  • sr-发布活动
    .nly-icon-sr-fabuhuodong
  • sr-服务订阅
    .nly-icon-sr-fuwudingyue
  • sr-创新能力分析系统
    .nly-icon-sr-chuangxinnenglifenxixitong
  • sr-产业技术联盟
    .nly-icon-sr-chanyejishulianmeng
  • sr-个人认证
    .nly-icon-sr-gerenrenzheng
  • sr-发布技术
    .nly-icon-sr-fabujishu
  • sr-产业应用系统
    .nly-icon-sr-chanyeyingyongxitong
  • sr-高校
    .nly-icon-sr-gaoxiao
  • sr-成果直通车
    .nly-icon-sr-chengguozhitongche
  • sr-发布问答
    .nly-icon-sr-fabuwenda
  • sr-国际创新中心
    .nly-icon-sr-guojichuangxinzhongxin
  • nav,菜单
    .nly-icon-nav4
  • nav,菜单
    .nly-icon-nav2
  • nav,菜单
    .nly-icon-nav5
  • nav,菜单
    .nly-icon-nav3
  • nav,菜单
    .nly-icon-nav
  • nav-fill,菜单
    .nly-icon-nav-extension
  • add-bookmark-fill,新增书签
    .nly-icon-add-bookmark-fill
  • empty-bookmark-fill,空书签
    .nly-icon-empty-bookmark-fill
  • delete-bookmark-fill,删除书签
    .nly-icon-delete-bookmark-fill
  • arrow-bottom-fill,底部箭头
    .nly-icon-arrow-bottom-fill
  • arrow-top-fill,顶部箭头
    .nly-icon-arrow-top-fill
  • arrow-left-fill,左侧箭头
    .nly-icon-arrow-left-fill
  • arrow-right-fill,右侧箭头
    .nly-icon-arrow-right-fill
  • breadcrumb-fill,面包屑
    .nly-icon-breadcrumb-fill
  • close-fill,关闭
    .nly-icon-close-fill
  • new-fill,新增
    .nly-icon-new-fill
  • remove-fill,移除
    .nly-icon-remove-fill
  • eye-fill,开眼
    .nly-icon-eye-fill
  • eye-off-fill,闭眼
    .nly-icon-eye-off-fill
  • home-fill,首页
    .nly-icon-home-fill
  • unlock-fill,开锁
    .nly-icon-unlock-fill
  • lock-fill,首页
    .nly-icon-lock-fill
  • mini-fill,最小
    .nly-icon-mini-fill
  • max-fill,最大
    .nly-icon-max-fill
  • security-fill,保护
    .nly-icon-security-fill
  • nosecurity-fill,无保护
    .nly-icon-nosecurity-fill
  • news-fill,文章
    .nly-icon-news-fill
  • setting-fill,设置
    .nly-icon-setting-fill
  • send-fill,发送
    .nly-icon-send-fill
  • search-fill,搜索
    .nly-icon-search-fill
  • save-fill,保存
    .nly-icon-save-fill
  • refresh-fill,刷新
    .nly-icon-refresh-fill
  • star-fill,星星
    .nly-icon-star-fill
  • trash-can-fill,垃圾桶
    .nly-icon-trash-can-fill
  • zoom-max-fill,放大
    .nly-icon-zoom-max-fill
  • zoom-mini-fill,缩小
    .nly-icon-zoom-mini-fill
  • success-fill,成功
    .nly-icon-success-fill
  • inbox-fill,邮箱
    .nly-icon-inbox-fill
  • power-fill,退出
    .nly-icon-power-fill
  • folder-fill,文件夹
    .nly-icon-folder-fill
  • file-fill,文件
    .nly-icon-file-fill
  • mail-fill,信
    .nly-icon-mail-fill
  • link-fill,点赞
    .nly-icon-link-fill
  • dislink-fill,差评
    .nly-icon-dislink-fill
  • calendar-fill,日历
    .nly-icon-calendar-fill
  • notification-fill,消息
    .nly-icon-notification-fill
  • note-fill,笔记
    .nly-icon-note-fill
  • document-fill,文档
    .nly-icon-document-fill
  • download-fill,下载
    .nly-icon-download-fill
  • upload-fill,上传
    .nly-icon-upload-fill
  • storage-fill,云
    .nly-icon-storage-fill
  • storageup-fill,云上
    .nly-icon-storageup-fill
  • storagedown-fill,云下
    .nly-icon-storagedown-fill
  • editor-fill,编辑
    .nly-icon-editor-fill
  • time-fill,时间
    .nly-icon-time-fill
  • user-fill,用户
    .nly-icon-user-fill
  • nav-tool,菜单工具
    .nly-icon-nav-tool
  • checkbox-ok-fill,选择成功
    .nly-icon-checkbox-ok-fill
  • checkbox-fill,空选择框
    .nly-icon-checkbox-fill
  • screenfull-fill,全屏
    .nly-icon-screenfull-fill
  • trash,垃圾桶
    .nly-icon-trash
  • play-fill,开始
    .nly-icon-play-fill
  • pause-fill,暂停
    .nly-icon-pause-fill
  • print-fill,打印
    .nly-icon-print-fill
  • dashboard-fill,仪表盘
    .nly-icon-dashboard-fill
  • storagedown,云下
    .nly-icon-storagedownyunxia
  • editor,编辑
    .nly-icon-editor
  • check,选择
    .nly-icon-check
  • time,时间
    .nly-icon-time
  • user,用户
    .nly-icon-user
  • play,开始
    .nly-icon-play
  • pause,暂停
    .nly-icon-pause
  • print,打印
    .nly-icon-print
  • dashboard,仪表盘
    .nly-icon-dashboard
  • add-bookmark,新增书签
    .nly-icon-add-bookmark
  • empty-bookmark,空书签
    .nly-icon-empty-bookmark
  • delete-bookmark,删除书签
    .nly-icon-delete-bookmark
  • arrow-bottom,底部箭头
    .nly-icon-arrow-bottom
  • arrow-top,顶部箭头
    .nly-icon-arrow-top
  • arrow-left,左侧箭头
    .nly-icon-arrow-left
  • arrow-right,右侧箭头
    .nly-icon-arrow-right
  • breadcrumb,面包屑
    .nly-icon-breadcrumb
  • close,关闭
    .nly-icon-close
  • new,新增
    .nly-icon-new
  • remove,移除
    .nly-icon-remove
  • eye,开眼
    .nly-icon-eye
  • eye-off,闭眼
    .nly-icon-eye-off
  • home,首页
    .nly-icon-home
  • unlock,开锁
    .nly-icon-unlock
  • lock,锁
    .nly-icon-lock
  • mini,最小
    .nly-icon-mini
  • max,最大
    .nly-icon-max
  • security,保护
    .nly-icon-security
  • nosecurity,无保护
    .nly-icon-nosecurity
  • news,文章
    .nly-icon-news
  • setting,设置
    .nly-icon-setting
  • send,发送
    .nly-icon-send
  • search,搜索
    .nly-icon-search
  • save,保存
    .nly-icon-save
  • refresh,刷新
    .nly-icon-refresh
  • star,星星
    .nly-icon-star
  • trash-can,垃圾桶
    .nly-icon-trash-can
  • zoom-max,放大
    .nly-icon-zoom-max
  • zoom-mini,缩小
    .nly-icon-zoom-mini
  • success,成功
    .nly-icon-success
  • inbox,邮箱
    .nly-icon-inbox
  • power,退出
    .nly-icon-power
  • folder,文件夹
    .nly-icon-folder
  • file,文件
    .nly-icon-file
  • mail,信
    .nly-icon-mail
  • link,点赞
    .nly-icon-link
  • dislink,差评
    .nly-icon-dislink
  • calendar,日历
    .nly-icon-calendar
  • notification,消息
    .nly-icon-notification
  • note,笔记
    .nly-icon-note
  • document,文档
    .nly-icon-document
  • download,下载
    .nly-icon-download
  • upload,上传
    .nly-icon-upload
  • storage,云
    .nly-icon-storageyun
  • storageup,云上
    .nly-icon-storageupyunshang

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="nlyfont nly-icon-xxx"></span>

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

  • 赞赏
    #nly-icon-zanshang
  • logo-github
    #nly-icon-logo-github
  • logo-angular
    #nly-icon-logo-angular
  • logo-bitbucket
    #nly-icon-logo-bitbucket
  • logo-bitcoin
    #nly-icon-logo-bitcoin
  • logo-designernews
    #nly-icon-logo-designernews
  • logo-closed-captioning
    #nly-icon-logo-closed-captioning
  • logo-css3
    #nly-icon-logo-css
  • logo-dropbox
    #nly-icon-logo-dropbox
  • logo-aperture
    #nly-icon-logo-aperture
  • logo-apple
    #nly-icon-logo-apple
  • logo-chrome
    #nly-icon-logo-chrome
  • logo-ionitron
    #nly-icon-logo-ionitron
  • logo-html5
    #nly-icon-logo-html
  • logo-android
    #nly-icon-logo-android
  • logo-codepen
    #nly-icon-logo-codepen
  • logo-ionic
    #nly-icon-logo-ionic
  • logo-polymer
    #nly-icon-logo-polymer
  • logo-octocat
    #nly-icon-logo-octocat
  • logo-game-controller-b
    #nly-icon-logo-game-controller-b
  • logo-pinterest
    #nly-icon-logo-pinterest
  • logo-freebsd-devil
    #nly-icon-logo-freebsd-devil
  • logo-nodejs
    #nly-icon-logo-nodejs
  • logo-model-s
    #nly-icon-logo-model-s
  • logo-sass
    #nly-icon-logo-sass
  • logo-reddit
    #nly-icon-logo-reddit
  • logo-twitch
    #nly-icon-logo-twitch
  • logo-tux
    #nly-icon-logo-tux
  • logo-playstation
    #nly-icon-logo-playstation
  • logo-xbox
    #nly-icon-logo-xbox
  • logo-windows
    #nly-icon-logo-windows
  • logo-python
    #nly-icon-logo-python
  • logo-steam
    #nly-icon-logo-steam
  • logo-snapchat
    #nly-icon-logo-snapchat
  • sr-核心系统
    #nly-icon-sr-hexinxitong
  • sr-工业设计
    #nly-icon-sr-gongyesheji
  • sr-共享展厅
    #nly-icon-sr-gongxiangzhanting
  • sr-计算机开发
    #nly-icon-sr-jisuanjikaifa
  • sr-技术难题解决
    #nly-icon-sr-jishunantijiejue
  • sr-技术交易价格评估系统
    #nly-icon-sr-jishujiaoyijiagepingguxitong
  • sr-技术服务商
    #nly-icon-sr-jishufuwushang
  • sr-机构认证
    #nly-icon-sr-jigourenzheng
  • sr-工商财税
    #nly-icon-sr-gongshangcaishui
  • sr-技术需求预测系统
    #nly-icon-sr-jishuxuqiuyucexitong
  • sr-技术诊断
    #nly-icon-sr-jishuzhenduan
  • sr-技术需求预测
    #nly-icon-sr-jishuxuqiuyuce
  • sr-合作机构
    #nly-icon-sr-hezuojigou
  • sr-技术通
    #nly-icon-sr-jishutong
  • sr-科技成果
    #nly-icon-sr-kejichengguo
  • sr-技术转移服务
    #nly-icon-sr-jishuzhuanyifuwu
  • sr-讲坛
    #nly-icon-sr-jiangtan
  • sr-科技服务
    #nly-icon-sr-kejifuwu
  • sr-科技培训
    #nly-icon-sr-kejipeixun
  • sr-技术专家
    #nly-icon-sr-jishuzhuanjia
  • sr-各级政府
    #nly-icon-sr-gejizhengfu
  • sr-技术成果
    #nly-icon-sr-jishuchengguo
  • sr-录播申请
    #nly-icon-sr-luboshenqing
  • sr-科技项目
    #nly-icon-sr-kejixiangmu
  • sr-解决方案
    #nly-icon-sr-jiejuefangan
  • sr-热门推荐
    #nly-icon-sr-rementuijian
  • sr-科技企业
    #nly-icon-sr-kejiqiye
  • sr-精选优品
    #nly-icon-sr-jingxuanyoupin
  • sr-企业精准获客系统
    #nly-icon-sr-qiyejingzhunhuokexitong
  • sr-品牌设计
    #nly-icon-sr-pinpaisheji
  • sr-区域技术市场
    #nly-icon-sr-quyujishushichang
  • sr-软著预测
    #nly-icon-sr-ruanzhuyuce
  • sr-商标预测
    #nly-icon-sr-shangbiaoyuce
  • sr-项目路演
    #nly-icon-sr-xiangmuluyan
  • sr-实名认证
    #nly-icon-sr-shimingrenzheng
  • sr-投资意向预测
    #nly-icon-sr-touziyixiangyuce
  • sr-我的订阅
    #nly-icon-sr-wodedingyue
  • sr-我的需求
    #nly-icon-sr-wodexuqiu
  • sr-生产企业
    #nly-icon-sr-shengchanqiye
  • sr-企业认证
    #nly-icon-sr-qiyerenzheng
  • sr-收藏关注
    #nly-icon-sr-shoucangguanzhu
  • sr-校地合作
    #nly-icon-sr-xiaodihezuo
  • sr-研究院所
    #nly-icon-sr-yanjiuyuansuo
  • sr-需求直通车
    #nly-icon-sr-xuqiuzhitongche
  • sr-消息中心
    #nly-icon-sr-xiaoxizhongxin
  • sr-信息完善
    #nly-icon-sr-xinxiwanshan
  • sr-需求订阅
    #nly-icon-sr-xuqiudingyue
  • sr-演播室
    #nly-icon-sr-yanboshi
  • sr-院士工作站
    #nly-icon-sr-yuanshigongzuozhan
  • sr-优质供应商
    #nly-icon-sr-youzhigongyingshang
  • sr-园区服务
    #nly-icon-sr-yuanqufuwu
  • sr-政策智配
    #nly-icon-sr-zhengcezhipei
  • sr-找成果
    #nly-icon-sr-zhaochengguo
  • sr-找高校
    #nly-icon-sr-zhaogaoxiao
  • sr-重点广告位
    #nly-icon-sr-zhongdianguanggaowei
  • sr-找活动
    #nly-icon-sr-zhaohuodong
  • sr-直播申请
    #nly-icon-sr-zhiboshenqing
  • sr-园区
    #nly-icon-sr-yuanqu
  • sr-账号安全
    #nly-icon-sr-zhanghaoanquan
  • sr-找专家
    #nly-icon-sr-zhaozhuanjia
  • sr-政策指南针
    #nly-icon-sr-zhengcezhinanzhen
  • sr-找专利
    #nly-icon-sr-zhaozhuanli
  • sr-找需求
    #nly-icon-sr-zhaoxuqiu
  • sr-政务外包
    #nly-icon-sr-zhengwuwaibao
  • sr-在线技术交易系统
    #nly-icon-sr-zaixianjishujiaoyixitong
  • sr-在线展会
    #nly-icon-sr-zaixianzhanhui
  • sr-专利预测
    #nly-icon-sr-zhuanliyuce
  • sr-知识产权
    #nly-icon-sr-zhishichanquan
  • sr-产学研合作
    #nly-icon-sr-chanxueyanhezuo-fill
  • sr-产业智推
    #nly-icon-sr-chanyezhitui-fill
  • sr-成果直通车
    #nly-icon-sr-chengguozhitongche-fill
  • sr-创新服务
    #nly-icon-sr-chuangxinfuwu-fill
  • sr-产业应用系统
    #nly-icon-sr-chanyeyingyongxitong-fill
  • sr-发布问答
    #nly-icon-sr-fabuwenda-fill
  • sr-产业技术联盟
    #nly-icon-sr-chanyejishulianmeng-fill
  • sr-产学研平台
    #nly-icon-sr-chanxueyanpingtai-fill
  • sr-创新能力分析系统
    #nly-icon-sr-chuangxinnenglifenxixitong-fill
  • sr-个人认证
    #nly-icon-sr-gerenrenzheng-fill
  • sr-服务订阅
    #nly-icon-sr-fuwudingyue-fill
  • sr-产业大数据服务平台
    #nly-icon-sr-chanyedashujufuwupingtai-fill
  • sr-各级政府
    #nly-icon-sr-gejizhengfu-fill
  • sr-共享展厅
    #nly-icon-sr-gongxiangzhanting-fill
  • sr-成果转化服务
    #nly-icon-sr-chengguozhuanhuafuwu-fill
  • sr-合作机构
    #nly-icon-sr-hezuojigou-fill
  • sr-工商财税
    #nly-icon-sr-gongshangcaishui-fill
  • sr-发布技术
    #nly-icon-sr-fabujishu-fill
  • sr-工业设计
    #nly-icon-sr-gongyesheji-fill
  • sr-技术成果
    #nly-icon-sr-jishuchengguo-fill
  • sr-服务机构
    #nly-icon-sr-fuwujigou-fill
  • sr-计算机开发
    #nly-icon-sr-jisuanjikaifa-fill
  • sr-发布活动
    #nly-icon-sr-fabuhuodong-fill
  • sr-技术通
    #nly-icon-sr-jishutong-fill
  • sr-技术难题解决
    #nly-icon-sr-jishunantijiejue-fill
  • sr-技术诊断
    #nly-icon-sr-jishuzhenduan-fill
  • sr-技术专家
    #nly-icon-sr-jishuzhuanjia-fill
  • sr-技术需求预测系统
    #nly-icon-sr-jishuxuqiuyucexitong-fill
  • sr-机构认证
    #nly-icon-sr-jigourenzheng-fill
  • sr-高校
    #nly-icon-sr-gaoxiao-fill
  • sr-解决方案
    #nly-icon-sr-jiejuefangan-fill
  • sr-核心系统
    #nly-icon-sr-hexinxitong-fill
  • sr-精选优品
    #nly-icon-sr-jingxuanyoupin-fill
  • sr-科技培训
    #nly-icon-sr-kejipeixun-fill
  • sr-技术服务商
    #nly-icon-sr-jishufuwushang-fill
  • sr-科技企业
    #nly-icon-sr-kejiqiye-fill
  • sr-技术交易价格评估系统
    #nly-icon-sr-jishujiaoyijiagepingguxitong-fill
  • sr-技术需求预测
    #nly-icon-sr-jishuxuqiuyuce-fill
  • sr-技术转移服务
    #nly-icon-sr-jishuzhuanyifuwu-fill
  • sr-品牌设计
    #nly-icon-sr-pinpaisheji-fill
  • sr-录播申请
    #nly-icon-sr-luboshenqing-fill
  • sr-科技服务
    #nly-icon-sr-kejifuwu-fill
  • sr-热门推荐
    #nly-icon-sr-rementuijian-fill
  • sr-区域技术市场
    #nly-icon-sr-quyujishushichang-fill
  • sr-企业精准获客系统
    #nly-icon-sr-qiyejingzhunhuokexitong-fill
  • sr-科技成果
    #nly-icon-sr-kejichengguo-fill
  • sr-科技项目
    #nly-icon-sr-kejixiangmu-fill
  • sr-讲坛
    #nly-icon-sr-jiangtan-fill
  • sr-软著预测
    #nly-icon-sr-ruanzhuyuce-fill
  • sr-投资意向预测
    #nly-icon-sr-touziyixiangyuce-fill
  • sr-我的订阅
    #nly-icon-sr-wodedingyue-fill
  • sr-我的需求
    #nly-icon-sr-wodexuqiu-fill
  • sr-实名认证
    #nly-icon-sr-shimingrenzheng-fill
  • sr-企业认证
    #nly-icon-sr-qiyerenzheng-fill
  • sr-收藏关注
    #nly-icon-sr-shoucangguanzhu-fill
  • sr-校地合作
    #nly-icon-sr-xiaodihezuo-fill
  • sr-项目路演
    #nly-icon-sr-xiangmuluyan-fill
  • sr-信息完善
    #nly-icon-sr-xinxiwanshan-fill
  • sr-需求订阅
    #nly-icon-sr-xuqiudingyue-fill
  • sr-消息中心
    #nly-icon-sr-xiaoxizhongxin-fill
  • sr-研究院所
    #nly-icon-sr-yanjiuyuansuo-fill
  • sr-演播室
    #nly-icon-sr-yanboshi-fill
  • sr-需求直通车
    #nly-icon-sr-xuqiuzhitongche-fill
  • sr-院士工作站
    #nly-icon-sr-yuanshigongzuozhan-fill
  • sr-园区服务
    #nly-icon-sr-yuanqufuwu-fill
  • sr-优质供应商
    #nly-icon-sr-youzhigongyingshang-fill
  • sr-商标预测
    #nly-icon-sr-shangbiaoyuce-fill
  • sr-园区
    #nly-icon-sr-yuanqu-fill
  • sr-生产企业
    #nly-icon-sr-shengchanqiye-fill
  • sr-账号安全
    #nly-icon-sr-zhanghaoanquan-fill
  • sr-找需求
    #nly-icon-sr-zhaoxuqiu-fill
  • sr-找活动
    #nly-icon-sr-zhaohuodong-fill
  • sr-在线展会
    #nly-icon-sr-zaixianzhanhui-fill
  • sr-政策智配
    #nly-icon-sr-zhengcezhipei-fill
  • sr-找专家
    #nly-icon-sr-zhaozhuanjia-fill
  • sr-找高校
    #nly-icon-sr-zhaogaoxiao-fill
  • sr-找专利
    #nly-icon-sr-zhaozhuanli-fill
  • sr-知识产权
    #nly-icon-sr-zhishichanquan-fill
  • sr-直播申请
    #nly-icon-sr-zhiboshenqing-fill
  • sr-政策指南针
    #nly-icon-sr-zhengcezhinanzhen-fill
  • sr-重点广告位
    #nly-icon-sr-zhongdianguanggaowei-fill
  • sr-专利预测
    #nly-icon-sr-zhuanliyuce-fill
  • sr-在线技术交易系统
    #nly-icon-sr-zaixianjishujiaoyixitong-fill
  • sr-找成果
    #nly-icon-sr-zhaochengguo-fill
  • sr-政务外包
    #nly-icon-sr-zhengwuwaibao-fill
  • sr-国际创新中心
    #nly-icon-sr-guojichuangxinzhongxin-fill
  • sr-产学研平台
    #nly-icon-sr-chanxueyanpingtai
  • sr-产业大数据服务平台
    #nly-icon-sr-chanyedashujufuwupingtai
  • sr-产学研合作
    #nly-icon-sr-chanxueyanhezuo
  • sr-成果转化服务
    #nly-icon-sr-chengguozhuanhuafuwu
  • sr-创新服务
    #nly-icon-sr-chuangxinfuwu
  • sr-产业智推
    #nly-icon-sr-chanyezhitui
  • sr-服务机构
    #nly-icon-sr-fuwujigou
  • sr-发布活动
    #nly-icon-sr-fabuhuodong
  • sr-服务订阅
    #nly-icon-sr-fuwudingyue
  • sr-创新能力分析系统
    #nly-icon-sr-chuangxinnenglifenxixitong
  • sr-产业技术联盟
    #nly-icon-sr-chanyejishulianmeng
  • sr-个人认证
    #nly-icon-sr-gerenrenzheng
  • sr-发布技术
    #nly-icon-sr-fabujishu
  • sr-产业应用系统
    #nly-icon-sr-chanyeyingyongxitong
  • sr-高校
    #nly-icon-sr-gaoxiao
  • sr-成果直通车
    #nly-icon-sr-chengguozhitongche
  • sr-发布问答
    #nly-icon-sr-fabuwenda
  • sr-国际创新中心
    #nly-icon-sr-guojichuangxinzhongxin
  • nav,菜单
    #nly-icon-nav4
  • nav,菜单
    #nly-icon-nav2
  • nav,菜单
    #nly-icon-nav5
  • nav,菜单
    #nly-icon-nav3
  • nav,菜单
    #nly-icon-nav
  • nav-fill,菜单
    #nly-icon-nav-extension
  • add-bookmark-fill,新增书签
    #nly-icon-add-bookmark-fill
  • empty-bookmark-fill,空书签
    #nly-icon-empty-bookmark-fill
  • delete-bookmark-fill,删除书签
    #nly-icon-delete-bookmark-fill
  • arrow-bottom-fill,底部箭头
    #nly-icon-arrow-bottom-fill
  • arrow-top-fill,顶部箭头
    #nly-icon-arrow-top-fill
  • arrow-left-fill,左侧箭头
    #nly-icon-arrow-left-fill
  • arrow-right-fill,右侧箭头
    #nly-icon-arrow-right-fill
  • breadcrumb-fill,面包屑
    #nly-icon-breadcrumb-fill
  • close-fill,关闭
    #nly-icon-close-fill
  • new-fill,新增
    #nly-icon-new-fill
  • remove-fill,移除
    #nly-icon-remove-fill
  • eye-fill,开眼
    #nly-icon-eye-fill
  • eye-off-fill,闭眼
    #nly-icon-eye-off-fill
  • home-fill,首页
    #nly-icon-home-fill
  • unlock-fill,开锁
    #nly-icon-unlock-fill
  • lock-fill,首页
    #nly-icon-lock-fill
  • mini-fill,最小
    #nly-icon-mini-fill
  • max-fill,最大
    #nly-icon-max-fill
  • security-fill,保护
    #nly-icon-security-fill
  • nosecurity-fill,无保护
    #nly-icon-nosecurity-fill
  • news-fill,文章
    #nly-icon-news-fill
  • setting-fill,设置
    #nly-icon-setting-fill
  • send-fill,发送
    #nly-icon-send-fill
  • search-fill,搜索
    #nly-icon-search-fill
  • save-fill,保存
    #nly-icon-save-fill
  • refresh-fill,刷新
    #nly-icon-refresh-fill
  • star-fill,星星
    #nly-icon-star-fill
  • trash-can-fill,垃圾桶
    #nly-icon-trash-can-fill
  • zoom-max-fill,放大
    #nly-icon-zoom-max-fill
  • zoom-mini-fill,缩小
    #nly-icon-zoom-mini-fill
  • success-fill,成功
    #nly-icon-success-fill
  • inbox-fill,邮箱
    #nly-icon-inbox-fill
  • power-fill,退出
    #nly-icon-power-fill
  • folder-fill,文件夹
    #nly-icon-folder-fill
  • file-fill,文件
    #nly-icon-file-fill
  • mail-fill,信
    #nly-icon-mail-fill
  • link-fill,点赞
    #nly-icon-link-fill
  • dislink-fill,差评
    #nly-icon-dislink-fill
  • calendar-fill,日历
    #nly-icon-calendar-fill
  • notification-fill,消息
    #nly-icon-notification-fill
  • note-fill,笔记
    #nly-icon-note-fill
  • document-fill,文档
    #nly-icon-document-fill
  • download-fill,下载
    #nly-icon-download-fill
  • upload-fill,上传
    #nly-icon-upload-fill
  • storage-fill,云
    #nly-icon-storage-fill
  • storageup-fill,云上
    #nly-icon-storageup-fill
  • storagedown-fill,云下
    #nly-icon-storagedown-fill
  • editor-fill,编辑
    #nly-icon-editor-fill
  • time-fill,时间
    #nly-icon-time-fill
  • user-fill,用户
    #nly-icon-user-fill
  • nav-tool,菜单工具
    #nly-icon-nav-tool
  • checkbox-ok-fill,选择成功
    #nly-icon-checkbox-ok-fill
  • checkbox-fill,空选择框
    #nly-icon-checkbox-fill
  • screenfull-fill,全屏
    #nly-icon-screenfull-fill
  • trash,垃圾桶
    #nly-icon-trash
  • play-fill,开始
    #nly-icon-play-fill
  • pause-fill,暂停
    #nly-icon-pause-fill
  • print-fill,打印
    #nly-icon-print-fill
  • dashboard-fill,仪表盘
    #nly-icon-dashboard-fill
  • storagedown,云下
    #nly-icon-storagedownyunxia
  • editor,编辑
    #nly-icon-editor
  • check,选择
    #nly-icon-check
  • time,时间
    #nly-icon-time
  • user,用户
    #nly-icon-user
  • play,开始
    #nly-icon-play
  • pause,暂停
    #nly-icon-pause
  • print,打印
    #nly-icon-print
  • dashboard,仪表盘
    #nly-icon-dashboard
  • add-bookmark,新增书签
    #nly-icon-add-bookmark
  • empty-bookmark,空书签
    #nly-icon-empty-bookmark
  • delete-bookmark,删除书签
    #nly-icon-delete-bookmark
  • arrow-bottom,底部箭头
    #nly-icon-arrow-bottom
  • arrow-top,顶部箭头
    #nly-icon-arrow-top
  • arrow-left,左侧箭头
    #nly-icon-arrow-left
  • arrow-right,右侧箭头
    #nly-icon-arrow-right
  • breadcrumb,面包屑
    #nly-icon-breadcrumb
  • close,关闭
    #nly-icon-close
  • new,新增
    #nly-icon-new
  • remove,移除
    #nly-icon-remove
  • eye,开眼
    #nly-icon-eye
  • eye-off,闭眼
    #nly-icon-eye-off
  • home,首页
    #nly-icon-home
  • unlock,开锁
    #nly-icon-unlock
  • lock,锁
    #nly-icon-lock
  • mini,最小
    #nly-icon-mini
  • max,最大
    #nly-icon-max
  • security,保护
    #nly-icon-security
  • nosecurity,无保护
    #nly-icon-nosecurity
  • news,文章
    #nly-icon-news
  • setting,设置
    #nly-icon-setting
  • send,发送
    #nly-icon-send
  • search,搜索
    #nly-icon-search
  • save,保存
    #nly-icon-save
  • refresh,刷新
    #nly-icon-refresh
  • star,星星
    #nly-icon-star
  • trash-can,垃圾桶
    #nly-icon-trash-can
  • zoom-max,放大
    #nly-icon-zoom-max
  • zoom-mini,缩小
    #nly-icon-zoom-mini
  • success,成功
    #nly-icon-success
  • inbox,邮箱
    #nly-icon-inbox
  • power,退出
    #nly-icon-power
  • folder,文件夹
    #nly-icon-folder
  • file,文件
    #nly-icon-file
  • mail,信
    #nly-icon-mail
  • link,点赞
    #nly-icon-link
  • dislink,差评
    #nly-icon-dislink
  • calendar,日历
    #nly-icon-calendar
  • notification,消息
    #nly-icon-notification
  • note,笔记
    #nly-icon-note
  • document,文档
    #nly-icon-document
  • download,下载
    #nly-icon-download
  • upload,上传
    #nly-icon-upload
  • storage,云
    #nly-icon-storageyun
  • storageup,云上
    #nly-icon-storageupyunshang

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>