Icons

icon 图标默认是基于iconfont的图标,理论上可以传入任何icon图标,只要引入了对应的css

Base Icons

  • dashboard,仪表盘
    
  • print,打印
    
  • pause,暂停
    
  • play,开始
    
  • mail,信
    
  • link,点赞
    
  • dislink,差评
    
  • calendar,日历
    
  • notification,消息
    
  • note,笔记
    
  • document,文档
    
  • download,下载
    
  • upload,上传
    
  • storage,云
    
  • storageup,云上
    
  • storagedown,云下
    
  • editor,编辑
    
  • check,选择
    
  • time,时间
    
  • user,用户
    
  • 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,文件
    

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"。

Base Fill Icons

  • dashboard-fill,仪表盘
    &#xe6d0;
  • print-fill,打印
    &#xe6cb;
  • pause-fill,暂停
    &#xe6c7;
  • play-fill,开始
    &#xe6cd;
  • checkbox-ok-fill,选择成功
    &#xe6b0;
  • checkbox-fill,空选择框
    &#xe6b1;
  • screenfull-fill,全屏
    &#xe6b2;
  • trash,垃圾桶
    &#xe6b3;
  • inbox-fill,邮箱
    &#xe652;
  • power-fill,退出
    &#xe653;
  • folder-fill,文件夹
    &#xe654;
  • file-fill,文件
    &#xe655;
  • mail-fill,信
    &#xe656;
  • link-fill,点赞
    &#xe657;
  • dislink-fill,差评
    &#xe658;
  • calendar-fill,日历
    &#xe659;
  • notification-fill,消息
    &#xe65a;
  • note-fill,笔记
    &#xe65b;
  • document-fill,文档
    &#xe65c;
  • download-fill,下载
    &#xe65d;
  • upload-fill,上传
    &#xe65e;
  • storage-fill,云
    &#xe65f;
  • storageup-fill,云上
    &#xe660;
  • storagedown-fill,云下
    &#xe661;
  • editor-fill,编辑
    &#xe662;
  • time-fill,时间
    &#xe663;
  • user-fill,用户
    &#xe664;
  • nav-tool,菜单工具
    &#xe68e;
  • add-bookmark-fill,新增书签
    &#xe633;
  • empty-bookmark-fill,空书签
    &#xe634;
  • delete-bookmark-fill,删除书签
    &#xe635;
  • arrow-bottom-fill,底部箭头
    &#xe636;
  • arrow-top-fill,顶部箭头
    &#xe637;
  • arrow-left-fill,左侧箭头
    &#xe638;
  • arrow-right-fill,右侧箭头
    &#xe639;
  • breadcrumb-fill,面包屑
    &#xe63a;
  • close-fill,关闭
    &#xe63b;
  • new-fill,新增
    &#xe63c;
  • remove-fill,移除
    &#xe63d;
  • eye-fill,开眼
    &#xe63e;
  • eye-off-fill,闭眼
    &#xe63f;
  • home-fill,首页
    &#xe640;
  • unlock-fill,开锁
    &#xe641;
  • lock-fill,首页
    &#xe642;
  • mini-fill,最小
    &#xe643;
  • max-fill,最大
    &#xe644;
  • security-fill,保护
    &#xe645;
  • nosecurity-fill,无保护
    &#xe646;
  • news-fill,文章
    &#xe647;
  • setting-fill,设置
    &#xe648;
  • send-fill,发送
    &#xe649;
  • search-fill,搜索
    &#xe64a;
  • save-fill,保存
    &#xe64b;
  • refresh-fill,刷新
    &#xe64c;
  • star-fill,星星
    &#xe64d;
  • trash-can-fill,垃圾桶
    &#xe64e;
  • zoom-max-fill,放大
    &#xe64f;
  • zoom-mini-fill,缩小
    &#xe650;
  • success-fill,成功
    &#xe651;

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"。

  • nav,菜单
    &#xe6d3;
  • nav,菜单
    &#xe6d4;
  • nav,菜单
    &#xe6d5;
  • nav,菜单
    &#xe6d6;
  • nav,菜单
    &#xe6d2;
  • nav-fill,菜单
    &#xe6d7;

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"。

Logo Icons

  • logo-angular
    &#xe665;
  • logo-bitbucket
    &#xe666;
  • logo-bitcoin
    &#xe667;
  • logo-designernews
    &#xe668;
  • logo-closed-captioning
    &#xe669;
  • logo-css3
    &#xe66a;
  • logo-dropbox
    &#xe66b;
  • logo-aperture
    &#xe66c;
  • logo-apple
    &#xe66d;
  • logo-chrome
    &#xe66e;
  • logo-ionitron
    &#xe66f;
  • logo-html5
    &#xe670;
  • logo-android
    &#xe671;
  • logo-codepen
    &#xe672;
  • logo-ionic
    &#xe673;
  • logo-polymer
    &#xe674;
  • logo-octocat
    &#xe675;
  • logo-game-controller-b
    &#xe676;
  • logo-pinterest
    &#xe677;
  • logo-freebsd-devil
    &#xe678;
  • logo-nodejs
    &#xe679;
  • logo-model-s
    &#xe67a;
  • logo-sass
    &#xe67b;
  • logo-reddit
    &#xe67c;
  • logo-twitch
    &#xe67d;
  • logo-tux
    &#xe67e;
  • logo-playstation
    &#xe67f;
  • logo-xbox
    &#xe680;
  • logo-windows
    &#xe681;
  • logo-python
    &#xe682;
  • logo-steam
    &#xe683;
  • logo-snapchat
    &#xe684;

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"。

Scientific Research

  • sr-产学研平台
    &#xe714;
  • sr-产业大数据服务平台
    &#xe715;
  • sr-产学研合作
    &#xe716;
  • sr-成果转化服务
    &#xe717;
  • sr-创新服务
    &#xe718;
  • sr-产业智推
    &#xe719;
  • sr-服务机构
    &#xe71a;
  • sr-发布活动
    &#xe71b;
  • sr-服务订阅
    &#xe71c;
  • sr-创新能力分析系统
    &#xe71d;
  • sr-产业技术联盟
    &#xe71e;
  • sr-个人认证
    &#xe71f;
  • sr-发布技术
    &#xe720;
  • sr-产业应用系统
    &#xe721;
  • sr-高校
    &#xe722;
  • sr-成果直通车
    &#xe723;
  • sr-发布问答
    &#xe724;
  • sr-国际创新中心
    &#xe725;
  • sr-核心系统
    &#xe726;
  • sr-工业设计
    &#xe727;
  • sr-共享展厅
    &#xe728;
  • sr-计算机开发
    &#xe729;
  • sr-技术难题解决
    &#xe72a;
  • sr-技术交易价格评估系统
    &#xe72b;
  • sr-技术服务商
    &#xe72c;
  • sr-机构认证
    &#xe72d;
  • sr-工商财税
    &#xe72e;
  • sr-技术需求预测系统
    &#xe72f;
  • sr-技术诊断
    &#xe730;
  • sr-技术需求预测
    &#xe731;
  • sr-合作机构
    &#xe732;
  • sr-技术通
    &#xe733;
  • sr-科技成果
    &#xe734;
  • sr-技术转移服务
    &#xe735;
  • sr-讲坛
    &#xe736;
  • sr-科技服务
    &#xe737;
  • sr-科技培训
    &#xe738;
  • sr-技术专家
    &#xe739;
  • sr-各级政府
    &#xe73a;
  • sr-技术成果
    &#xe73b;
  • sr-录播申请
    &#xe73c;
  • sr-科技项目
    &#xe73d;
  • sr-解决方案
    &#xe73e;
  • sr-热门推荐
    &#xe73f;
  • sr-科技企业
    &#xe740;
  • sr-精选优品
    &#xe741;
  • sr-企业精准获客系统
    &#xe742;
  • sr-品牌设计
    &#xe743;
  • sr-区域技术市场
    &#xe744;
  • sr-软著预测
    &#xe745;
  • sr-商标预测
    &#xe746;
  • sr-项目路演
    &#xe747;
  • sr-实名认证
    &#xe748;
  • sr-投资意向预测
    &#xe749;
  • sr-我的订阅
    &#xe74a;
  • sr-我的需求
    &#xe74b;
  • sr-生产企业
    &#xe74c;
  • sr-企业认证
    &#xe74d;
  • sr-收藏关注
    &#xe74e;
  • sr-校地合作
    &#xe74f;
  • sr-研究院所
    &#xe750;
  • sr-需求直通车
    &#xe751;
  • sr-消息中心
    &#xe752;
  • sr-信息完善
    &#xe753;
  • sr-需求订阅
    &#xe754;
  • sr-演播室
    &#xe755;
  • sr-院士工作站
    &#xe756;
  • sr-优质供应商
    &#xe757;
  • sr-园区服务
    &#xe758;
  • sr-政策智配
    &#xe759;
  • sr-找成果
    &#xe75a;
  • sr-找高校
    &#xe75b;
  • sr-重点广告位
    &#xe75d;
  • sr-找活动
    &#xe75e;
  • sr-直播申请
    &#xe75f;
  • sr-园区
    &#xe760;
  • sr-账号安全
    &#xe761;
  • sr-找专家
    &#xe762;
  • sr-政策指南针
    &#xe763;
  • sr-找专利
    &#xe764;
  • sr-找需求
    &#xe765;
  • sr-政务外包
    &#xe766;
  • sr-在线技术交易系统
    &#xe767;
  • sr-在线展会
    &#xe768;
  • sr-专利预测
    &#xe769;
  • sr-知识产权
    &#xe76a;
  • sr-国际创新中心
    &#xe6f2;
  • sr-需求直通车
    &#xe6fd;
  • sr-院士工作站
    &#xe6fe;
  • sr-园区服务
    &#xe6ff;
  • sr-优质供应商
    &#xe700;
  • sr-商标预测
    &#xe701;
  • sr-园区
    &#xe702;
  • sr-生产企业
    &#xe703;
  • sr-账号安全
    &#xe704;
  • sr-找需求
    &#xe705;
  • sr-找活动
    &#xe706;
  • sr-在线展会
    &#xe707;
  • sr-政策智配
    &#xe708;
  • sr-找专家
    &#xe709;
  • sr-找高校
    &#xe70a;
  • sr-找专利
    &#xe70b;
  • sr-知识产权
    &#xe70c;
  • sr-直播申请
    &#xe70d;
  • sr-政策指南针
    &#xe70e;
  • sr-重点广告位
    &#xe70f;
  • sr-专利预测
    &#xe710;
  • sr-在线技术交易系统
    &#xe711;
  • sr-找成果
    &#xe712;
  • sr-政务外包
    &#xe713;
  • sr-产学研合作
    &#xe6be;
  • sr-产业智推
    &#xe6bf;
  • sr-成果直通车
    &#xe6c0;
  • sr-创新服务
    &#xe6c1;
  • sr-产业应用系统
    &#xe6c2;
  • sr-发布问答
    &#xe6c3;
  • sr-产业技术联盟
    &#xe6c4;
  • sr-产学研平台
    &#xe6c5;
  • sr-创新能力分析系统
    &#xe6c6;
  • sr-个人认证
    &#xe6c7;
  • sr-服务订阅
    &#xe6c8;
  • sr-产业大数据服务平台
    &#xe6c9;
  • sr-各级政府
    &#xe6ca;
  • sr-共享展厅
    &#xe6cb;
  • sr-成果转化服务
    &#xe6cc;
  • sr-合作机构
    &#xe6cd;
  • sr-工商财税
    &#xe6ce;
  • sr-发布技术
    &#xe6cf;
  • sr-工业设计
    &#xe6d0;
  • sr-技术成果
    &#xe6d1;
  • sr-服务机构
    &#xe6d2;
  • sr-计算机开发
    &#xe6d3;
  • sr-发布活动
    &#xe6d4;
  • sr-技术通
    &#xe6d5;
  • sr-技术难题解决
    &#xe6d6;
  • sr-技术诊断
    &#xe6d7;
  • sr-技术专家
    &#xe6d8;
  • sr-技术需求预测系统
    &#xe6d9;
  • sr-机构认证
    &#xe6da;
  • sr-高校
    &#xe6db;
  • sr-解决方案
    &#xe6dc;
  • sr-核心系统
    &#xe6dd;
  • sr-精选优品
    &#xe6de;
  • sr-科技培训
    &#xe6df;
  • sr-技术服务商
    &#xe6e0;
  • sr-科技企业
    &#xe6e1;
  • sr-技术交易价格评估系统
    &#xe6e2;
  • sr-技术需求预测
    &#xe6e3;
  • sr-技术转移服务
    &#xe6e4;
  • sr-品牌设计
    &#xe6e5;
  • sr-录播申请
    &#xe6e6;
  • sr-科技服务
    &#xe6e7;
  • sr-热门推荐
    &#xe6e8;
  • sr-区域技术市场
    &#xe6e9;
  • sr-企业精准获客系统
    &#xe6ea;
  • sr-科技成果
    &#xe6eb;
  • sr-科技项目
    &#xe6ec;
  • sr-讲坛
    &#xe6ed;
  • sr-软著预测
    &#xe6ee;
  • sr-投资意向预测
    &#xe6ef;
  • sr-我的订阅
    &#xe6f0;
  • sr-我的需求
    &#xe6f1;
  • sr-实名认证
    &#xe6f3;
  • sr-企业认证
    &#xe6f4;
  • sr-收藏关注
    &#xe6f5;
  • sr-校地合作
    &#xe6f6;
  • sr-项目路演
    &#xe6f7;
  • sr-信息完善
    &#xe6f8;
  • sr-需求订阅
    &#xe6f9;
  • sr-消息中心
    &#xe6fa;
  • sr-研究院所
    &#xe6fb;
  • sr-演播室
    &#xe6fc;

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"。